vue2与vue3的不同之处
1.template
Vue2组件中的html模板中必须要有一对根标签,Vue3组件的html模板中可以没有根标签
//vue2
<template>
<div class="about">
<h1>This is an about page</h1>
<h1>hello</h1>
</div>
</template>
//vue3
<template>
<h1>This is an about page</h1>
<h1>hello</h1>
</template>
2.在main.js中的不同
//vue2
import Vue from 'vue'
import App from './App.vue'
import router from './router'
import store from './store'
Vue.config.productionTip = false
new Vue({
router,
store,
render: h => h(App)
// template:'<h1>1214</h1>'
}).$mount('#app')
//vue3
// 引入不再是构造函数 而是 工厂函数 createApp ，创建应用实例
import {createApp} from 'vue'
import App from './App.vue'
import router from './router'
import store from './store'
// 创建app应用返回对应的实例对象,调用mount方法进行挂载 挂载到
createApp(App).use(store).use(router).mount('#app')
console.log(createApp(App));
3.Composition API
Composition API可以更方便的抽取共通逻辑，但是不要过于在意逻辑代码复用，以功能提取代码也是一种思路。
顺便提一句，Vue3兼容大部分Vue2语法，所以在Vue3中书写Vue2语法是没有问题的（废除的除外），但是既然我们已经升级Vue3了，不建议混合使用，除非一些大型特殊项目需要兼容两个版本。
setup
vue3.0 中的一个配置项，值是函数
setup是组合Composition API中的入口函数，也是第一个要使用的函数。
setup只在初始化时执行一次，所有的Composition API函数都在此使用。
组件中使用的的数据、方法等，都需要配置在setup中
setup需要返回值 ：
1.返回值为对象：返回值的中的属性、方法均可以在模板中使用
2.返回值是函数（不常用）,需要借助h函数
setupsetup是组合Composition API中的入口函数，也是第一个要使用的函数。
setup只在初始化时执行一次，所有的Composition API函数都在此使用。
setup() {
console.log('我执行了')
},
可以通过console.log看到setup是在beforeCreate生命周期之前执行的(只执行一次)
beforeCreate() {
console.log('beforeCreate执行了');
},
setup() {
console.log('setup执行了');
return {};
},
由此可以推断出setup执行的时候,组件对象还没有创建,组件实例对象this还不可用,此时this是undefined, 不能通过this来访问data/computed/methods/props。
返回对象中的属性会与data函数返回对象的属性合并成为组件对象的属性，返回对象中的方法会与methods中的方法合并成功组件对象的方法，如果有重名, setup优先。因为在setup中this不可用，methods中可以访问setup提供的属性和方法, 但在setup方法中不能访问data和methods里的内容，所以还是不建议混合使用。
setup函数如果返回对象, 对象中的 属性 或 方法 , 模板 中可以直接使用
<div>{{number}}</div>
setup() {
const number = 18;
return {
number,
};
},
注意：setup不能是一个async函数: 因为返回值不再是return的对象, 而是promise, 模板中就不可以使用return中返回对象的数据了。
ref
作用：定义一个响应式数据 (一般用来定义一个基本类型的响应式数Undefined、Null、Boolean、Number和String)
用法： ref(数据值) 比如 let name=ref('张三')
返回一个包含响应式数据的引用对象 RefImpl
在模板中直接使用 name,不需要value
而在js操作中 name.value
接收的数据：可以是基本数据类型，也可以是对象
基本数据类型: 响应式依然是依靠definedProperty的get和set实现的
引用数据类型： 内部是依靠proxy
注意： 在Vue2中我们通过this.$refs来获取dom节点，
Vue3中我们通过ref来获取节点
首先需要在标签上添加ref='xxx'，然后再setup中定义一个初始值为null的ref类型,名字要和标签的ref属性一致
语法
const xxx = ref(initValue):
注意：script中操作数据需要使用xxx.value的形式，而模板中不需要加.value
用一个例子来演示：实现一个按钮,点击可以增加数字
<template>
<div>{{count}}</div>
<button @click='updateCount'>增加</button>
</template>
data() {
return {
conunt: 0,
};
},
methods: {
updateCount() {
this.conunt++;
},
},
setup() {
const count = ref(0);
function updateCount() {
count.value++;
}
return {
count,
updateCount,
};
},
注意：一定要在setup的return中返回，不然会报错。
reactive
作用： 定义一个对象类型的响应式数据
用法 reactive(对象数据) 接收对象或者是数组 返回值一个proxy对象（代理对象）
reactive 定义的响应式数据是深层次的
内部基于es6的proxy实现，通过代理对象操作源对象内部数据都是响应式的
语法: const proxy = reactive(obj)
4.生命周期
Vue3.0可以继续使用Vue2.x中的生命周期函数，但有两个被更名
beforeDestory 改为 beforeUnmount
destoryed 改为 unmounted
Vue3.0也提供了composition API形式的生命周期函数，与Vue2.x钩子对应关系如下：
beforeCreate ====> setup()
created ====> setup()
beforeMount ====> onBeforeMount
mounted ====> onMounted
beforeUpdate ====> onBeforeUpdate
updated ====> onUpdated
beforeUnmount ====>onBeforeUnmount
unmounted ====> onUnmounted
5.响应式原理
Vue2.X的响应式原理
实现原理：
对象类型：通过definedProperty()对属性的读取、修改进行拦截（数据拦截）
数组类型：通过重写更新数组的一系列方法来实现拦截。（对数组的变更方法进行了包裹）
用法：
Object.definedProperty(data,'属性',{
get(){},
set(){}
})
缺点：
新增属性、删除属性，界面不会更新
直接通过下标修改数组、界面不会更新
Vue3.0的响应式原理
实现原理
通过Proxy（代理）：拦截对象中任意属性的变化，包括属性值的读写、属性的添加、属性的删除等
通过Reflect（反射）: 对被代理的属性进行操作
用法：
new Proxy(data,{
// 拦截读取属性值
get(target,prop){
return Reflect.get(target,prop)
},
// 拦截设置属性值或添加新属性
set(target,prop,value){
return Reflect.set(target,prop,value)
},
// 拦截删除属性
deleteProperty(target,prop){
return Reflect.deleteProperty(target,prop)
}
})
|