Vue3入门

一、Vue3介绍

关于vue项目的版本，新项目使用vue3，有部分老项目使用vue2。

vue3官方文档

vue3的变化

	1.性能的提升
    -打包大小减少41%
    -初次渲染快55%, 更新渲染快133%
    -内存减少54%
	2.源码的升级
	    使用Proxy代替defineProperty实现响应式
	    重写虚拟DOM的实现和Tree-Shaking
	3.拥抱TypeScript
	    Vue3可以更好的支持TypeScript
	4.新的特性
	    Composition API（组合API）
	    setup配置
	    ref与reactive
	    watch与watchEffect
	    provide与inject
	    新的内置组件
	    Fragment
	    Teleport
	    Suspense
	    其他改变
	
	    新的生命周期钩子
	    data 选项应始终被声明为一个函数
	    移除keyCode支持作为 v-on 的修饰符
	    
	    # vue2配置项与vue3组合式的区别
	        vue2 ：配置项API
	             new Vue({
	                 el:'#app',
	                 data:{}
	             })
	
	        vue3: 组合式API
	            let name='kiki'
	            let add=()=>{ 
	            }

---

二、Vue3项目创建

1）使用vue-cli创建vue3项目

创建跟之前的vue2一样，只是在选择vue版本的时候选择vue3版本,同样用pycharm打开然后配置好配置项后运行即可。

	vue create 名称		// 选择需要的配置 到版本选择3.X即可	
	npm run server		// 运行服务器

---

vue3的项目简单解释

	'main.js'
	import { createApp } from 'vue' # 通过 createApp创建vue实例
	import App from './App.vue'  # 根组件
	import router from './router' # vue-router
	import store from './store' #vuex
	
	var vue = createApp(App) # 创建vue实例
	vue.use(store)#使用vuex
	vue.use(router)# 使用vue-router
	vue.mount('#app')# 挂在index.html中得div
	
	
	'其他地方写起来跟之前写vue2完全一致，vue3是兼容的'

2）使用vite创建vue3项目

Vite 是一个轻量级的、速度极快的构建工具，对 Vue SFC 提供第一优先级支持。作者是尤雨溪，同时也是 Vue 的作者！是新建的前端构架工具，最大的优势就是速度快。

vite使用步骤

	1. 安装---默认最新版
    	npm create vue@latest  // 这个命令可以根据自己的需求选择功能(如vue-router)
    	npm create vite@latest //这个命令没有选择第三方插件
	2. 在项目中执行npm install 命令 ，虽然vite创建非常快，但是它没有安装依赖，所以需要自己安装一下
		没有这个node_modules依赖
	       
	3  运行npm run dev启动项目

	注意点：
	4. vueRouter跟之前一样
	5. Pinia:用来替换Vuex的，新一代的状态管理器

---

三、Setup函数

简化代码和项目的简洁度，vue新增了setup函数。

• setup为Vue3.0中一个新的配置项，值为一个函数

• setup是所有Composition API（组合API）编写的位置

• 组件中所用到的：数据、方法等等，均要配置在setup中

• setup函数的返回值：返回一个对象，对象中的属性、方法, 在模板中均可以直接使用

• 注意：
  尽量不要与Vue2.x配置混用

  • Vue2.x配置（data、methos、computed…）中可以访问到setup中的属性、方法。
    但在setup中不能访问到Vue2.x配置（data、methos、computed…）。
    如果有重名, setup优先。

任意一个页面组件看看效果

	<template>
	  <div class="home">
	    <h1>Setup函数</h1>
	    <hr>
	    <p>名字：{{name}}</p>
	    <p>年龄：{{age}}</p>
	    <button @click="addAge">点击年龄+10</button>
	  </div>
	</template>
	
	<script>
	
	export default {
	  name: 'HomeView',
	  setup(){
	    // setup中没有this了
	    // 以后所有的变量定义函数编写，都写在这个函数中
	    // 定义变量 如果这么写，变量渲染没问题，但是没有响应式，页面变了，变量不会变
	    // vue3中，默认是没有响应式的
	
	    //1.定义变量，跟正常js一样，但是推荐使用let，而不是使用var
	    let name = 'jack'
	    let age = 18
	
	    //2.定义函数
	    let addAge = () => {
	      age+=10
	      console.log(age)  //可以发现变量是变了，但是没有响应式
	    }
	
	    //必须要有返回值，是个对象，返回的对象，可以在模版中使用
	    return {name,age,addAge}
	  }
	}
	</script>

---

vue2的创建vue实例和vue3创建vue实例的区别

	'Vue2'
	1.new Vew()--->是Vue的实例，里面有$store,$refs....
	
	'Vue3'
	1.createApp(App)--->是个对象，对象里有东西，没有$store,$refs....等对象，当需要使用直接导入使用
	2.vue3的<template>，不需要写一个标签了
	3.定义变量/函数，都写在setup函数中，都要return函数，在<template>才能使用
	4.但是失去了响应式
	
	总结：
	   1.在setup中定义的变量和函数，在之前配置项api中可以直接使用this.变量，函数调用即可
	   2.但是在原来配置项中定义的变量，函数，在setup中无法使用

---

四、ref和reactive

	1.导入使用：import {ref, reactive} from 'vue'
	2.基本数据类型（数字，字符串，布尔）如果要加响应式
	      使用ref包裹，在模板中直接读取定义量
	      js中通过对象.value取值
	3.对象，数组引用使用reactive,ref可以包对象类型，但是用的时候必须.value。
	      操作数据与读取数据：均不需要.value

1）ref函数

• 作用: 定义一个响应式的数据
• 语法: const xxx = ref(initValue)
  • 创建一个包含响应式数据的引用对象（reference对象，简称ref对象）。
  • JS中操作数据： xxx.value
  • 模板中读取数据: 不需要.value，直接：<div>{{xxx}}</div>
• 备注：
  • 接收的数据可以是：基本类型、也可以是对象类型。
  • 基本类型的数据：响应式依然是靠Object.defineProperty()的get与set完成的
  • 对象类型的数据：内部 求助 了Vue3.0中的一个新函数—— reactive函数

	<template>
	  <div class="home">
	    <h1>Setup函数</h1>
	    <hr>
	    <h3>ref函数</h3>
	    <p>名字：{{name}}</p>
	    <p>年龄：{{age}}</p>
	    <button @click="addAge">点击年龄+10</button>&nbsp;&nbsp;
	    <button @click="handlerChange('吴彦祖')">点击修改名字</button>
	
	  </div>
	</template>
	
	<script>
	import {ref,reactive} from "vue";
	
	export default {
	  name: 'HomeView',
	  setup(){
	    let name = ref('jack')
	    let age = ref(18)  //已经不是数字了，是RefImpl的对象
	
	    //2.定义函数
	    let addAge = () => {
	      age.value+=10
	      console.log(age)	
	    }
	
	    let handlerChange = (data)=>{
	      name.value = data  //属性.value就可以对属性进行操作
	      console.log(name)
	    }
	
	    //必须要有返回值，是个对象，返回的对象，可以在模版中使用
	    return {name,age,addAge,handlerChange}
	  }
	}
	</script>

---

2）reactive函数

• 作用: 定义一个对象类型的响应式数据（基本类型不要用它，要用ref函数）
• 语法：const 代理对象= reactive(源对象)接收一个对象（或数组），返回一个代理对象（Proxy的实例对象，简称proxy对象）
• reactive定义的响应式数据是“深层次的”
• 内部基于 ES6 的 Proxy 实现，通过代理对象操作源对象内部数据进行操作

	<template>
	  <div class="home">
	    <h1>Setup函数</h1>
	    <hr>
	    <h3>reactive函数</h3>
	    <p>用户名：{{userinfo.name}}</p>
	    <p>年龄：{{userinfo.age}}</p>
	    <p>爱好：{{userinfo.hobby[0]}},{{userinfo.hobby[1]}}</p>
	    <button @click="handlerClick">点击年龄+1</button>
	
	  </div>
	</template>
	
	<script>
	import {ref,reactive} from "vue";
	
	export default {
	  name: 'HomeView',
	  setup(){
	
	    let userinfo=reactive({'name':'oscar','age':23,'hobby':['jump','rap']})
	
	
	    let handlerClick = ()=>{
	      userinfo.age++
	      console.log(userinfo)
	    }
	
	    //必须要有返回值，是个对象，返回的对象，可以在模版中使用
	    return {userinfo,handlerClick}
	  }
	}
	</script>

---

3）reactive对比ref

	从定义数据角度对比：
		ref用来定义：基本类型数据
		reactive用来定义：对象（或数组）类型数据
		备注：ref也可以用来定义对象（或数组）类型数据, 它内部会自动通过reactive转为代理对象
		
	从原理角度对比：
		ref通过Object.defineProperty()的get与set来实现响应式（数据劫持）。
		reactive通过使用Proxy来实现响应式（数据劫持）, 并通过Reflect操作源对象内部的数据。
		
	从使用角度对比：
		ref定义的数据：操作数据需要.value，读取数据时模板中直接读取不需要.value。
		reactive定义的数据：操作数据与读取数据：均不需要.value。

4）setup的两个注意点

	setup执行的时机
		在beforeCreate之前执行一次，this是undefined。
		
	setup的参数
		props：值为对象，包含：组件外部传递过来，且组件内部声明接收了的属性。
		context：上下文对象
			attrs: 值为对象，包含：组件外部传递过来，但没有在props配置中声明的属性, 相当于 this.$attrs。
			slots: 收到的插槽内容, 相当于 this.$slots。
			emit: 分发自定义事件的函数, 相当于 this.$emit。

五、计算属性与监听属性

1）计算属性(computed函数)

通过绑定ref和rective来编写计算（computed）

	<script>
	import {ref, reactive,computed} from "vue";
	
	export default {
	  name: 'StatsView',
	  setup() {
	    let person = reactive({
	      firstname:'',
	      lastname:'',
	    })
	
	    //计算属性----》获取值 ,单拎出来写
	    // person.fullName = computed(()=>{
	    //   return person.firstname + person.lastname
	    // })
	
	    //计算属性----》修改值  //组合使用
	    person.fullName = computed({
	      get(){  //获取 触发它的执行
	        return person.firstname + person.lastname
	      },
	      set(NewValue){  //修改 触发它，传入修改后的值
	        console.log(NewValue)
	        person.firstname = NewValue.substring(0,1)
	        person.lastname = NewValue.slice(1)
	      }
	    })

	    return {person,}
	  },
	}
	</script>
	
	<template>
	  <div>
	    <h1>计算属性:computed</h1>
	    <hr>
	    <p>姓：<input type="text" v-model="person.firstname"></p>
	    <p>名：<input type="text" v-model="person.lastname"></p>
	    <p>全名：{{person.fullName}}</p>
	    <p>全名修改：<input type="text" v-model="person.fullName"></p>
	  </div>
	</template>

---

2）监听属性(watch函数)

	<script>
	import {ref, reactive,computed,watch} from "vue";
	
	export default {
	  name: 'StatsView',
	  setup() {
	    let count = ref(0)
	
	    let AddCount = ()=>{
	      count.value++
	    }
	
	    //监听基本类型
	    watch(count,(NewValue,OldValue)=>{
	      console.log(OldValue,NewValue)
	    })
	
	    //监听对象
	    let userinfo = reactive({
	        name:'jack',
	        age:22
	    })
	    let handlerName=()=>{
	      userinfo.name = '彭于晏'
	    }
	    watch(()=>userinfo.name,(NewValue,OldValue)=>{
	      console.log('名字变更了：'+userinfo.name)
	    })
	
	    //可以同时监听多个变量
	    /*
	     const sum = ref(100)
	     const msg = ref('很好')
	     watch([sum, msg], (newValue, oldValue) => {
	      console.log('sum或msg变化了', newValue, oldValue)
	    }) 
	    */
	
	    return {person,count,AddCount,userinfo,handlerName}
	  },
	}
	</script>
	
	<template>
	  <div>
	    <h1>监听属性:watch---基本类型</h1>
	    <p>数量：{{count}}</p>
	    <button @click="AddCount">点击数量+1</button>
	    <hr>
	    <h1>监听属性：watch---对象</h1>
	    <p>名字：{{userinfo.name}}</p>
	    <button @click="handlerName">点击变换名字</button>
	
	    <hr>
	  </div>
	</template>

---

六、Vue3生命周期

• Vue3.0中可以继续使用Vue2.x中的生命周期钩子，但有有两个被更名：
  • beforeDestroy改名为 beforeUnmount
  • destroyed改名为 unmounted
• Vue3.0也提供了 Composition API 形式的生命周期钩子，与Vue2.x中钩子对应关系如下：
  • beforeCreate===>setup()
  • created=======>setup()
  • beforeMount ===>onBeforeMount
  • mounted=======>onMounted
  • beforeUpdate===>onBeforeUpdate
  • updated =======>onUpdated
  • beforeUnmount ==>onBeforeUnmount
  • unmounted =====>onUnmounted

---

七、toRef

• toRef的作用：创建一个 ref 对象，其value值指向另一个对象中的某个属性。
• 语法：const name =toRef(person,'name')
• 应用: 要将响应式对象中的某个属性单独提供给外部使用时。
• 扩展：toRefs与toRef功能一致，但可以批量创建多个ref 对象，语法：toRefs(person)

	<script>
	import {ref,reactive,toRef,toRefs} from "vue";
	
	export default {
	  name:'TorefView.',
	  setup(){
	    let data = reactive({
	      name:'jack',
	      age:22,
	      hobby:'rap'
	    })
		
		console.log({...toRefs(data)}) //解压赋值
		
	    let count = ref(11)

    	return {...toRefs(data),count} //解压赋值，后续写影响
	  }
	}
	</script>
	
	<template>
	  <h1>toRef函数</h1>
	  <hr>
	  <p>名字：{{name}}</p>
	  <p>年龄：{{age}}</p>
	  <p>爱好：{{hobby}}</p>
	</template>

---