文章目录
- 1.Vue3的特性和变化
- 1.1.创建vue3项目
- 1.2.分析main.js变化：
- 1.3.setup--组合式api的开端
- 1.4.ref函数和reactive函数：
- 1.5.watch监视属性
- 1.5.watchEffect函数
- 1.6.vue3生命周期：
1.Vue3的特性和变化
1.1.创建vue3项目
1.这里我们使用脚手架进行创建
当然同样可以不使用webpack而使用vite进行构建你的vue项目
2.启动vue项目
vue3项目和vue2项目的基本操作方式并无不同
1.2.分析main.js变化：
vue2
import Vue from 'vue'
import App from './App.vue'
Vue.config.productionTip = false
new Vue({
render: h => h(App),
}).$mount('#app')
vue3
import { createApp } from 'vue'
import App from './App.vue'
createApp(App).mount('#app')
vue2和vue创建app和vm方式十分类似，vue采用new创建实例，而vue3采用工厂函数进行创建
就两者结果而言，vue2的vm更重，有相当多的属性和api，而vue2的app则做了针对的响应的精简，这也促成了vue3运行效率的提升
下图（第一个是vm，第二个是vue3的app）
1.3.setup–组合式api的开端
setup在beforeCreate之前执行
setup钩子是在组件中使用组合式 API 的入口，通常只在以下情况下使用：
1.需要在非单文件组件中使用组合式 API 时。
2.需要在基于选项式 API 的组件中集成基于组合式 API 的代码时。
setup() {
const count = ref(0)
// 返回值会暴露给模板和其他的选项式 API 钩子
return {
count
}
}
说人话就是这里划一块区域，叫大乱炖，啥属性，方法啥的，都可以往这里塞。
1.4.ref函数和reactive函数：
既然setup配置项里塞了那么多东西，稍微动一下就响应?
那肯定不行。
所以我们在setup中需要手动告诉vue那些数据需要动态响应
1.ref函数
setup() {
const count = ref(0)
// 返回值会暴露给模板和其他的选项式 API 钩子
return {
count
}
},
2.reactive函数
setup() {
const person = reactive({
name : '张三',
age : 21})
// 返回值会暴露给模板和其他的选项式 API 钩子
return {
person
}
},
reactive函数和以往任何函数都不同，它通过数据代理和反射对对象进行操作，无论对象增添还是删除属性，vue都能进行检测，弥补了vue2的缺点
1.5.watch监视属性
在vue3中，监视变更为函数式，因此可以写多个监视函数。
在监视使用reactive函数的对象时，oldValue会获取不到。
watch对reactive整体监视，深度监视配置无效，监视单一属性有效
监视对象其中属性，
watch(()=>person.age, (newValue,oldValue)=>{
console.log('新的值',newValue);
console.log('旧的值',oldValue);
})
可用数组监视多个属性
1.5.watchEffect函数
与watch用法基本一致，不过只需要指定回调即可
watchEffect(()=>{
const x = person.age
console.log('修改了age',x)
})
1.6.vue3生命周期：
vue3相对vue2于主要有以下变化：
1：在初始化生命周期前就判断有否有要挂载的el
2：把beforeDestroy和destroyed变更为beforeUnmount和unmounted
