vue3变化

1.setup 函数没有this属性，this为undefined

2.其生命周期在 beforeCreate 和 Created 两个钩子函数之前

3.要return一个函数出来（与react一样，setup忽略）

4.ref用于基本数据类型变成响应式，在函数类获取值为x.value,

ref支持所有属性，对于引用类型源码里调用reactive方法

 

5.reactive用于引用数据类型变成响应式，只支持引用类型,reactive 源码约束了我们的类型

 

reactive 数组中 直接给数组赋值 会让其失去响应式，解决方法
1.push

import { reactive } from 'vue'
let person = reactive<number[]>([])
setTimeout(() => {
  const arr = [1, 2, 3]
  person.push(...arr)
  console.log(person);
  
},1000)

2.改为一个对象，对象里设置对应的数组

type Person = {
  list?:Array<number>
}
let person = reactive<Person>({
   list:[]
})
setTimeout(() => {
  const arr = [1, 2, 3]
  person.list = arr;
  console.log(person);
  
},1000)

 

6.toref只能修改响应式对象值，非响应式视图不变，是来提取对象某个值

torefs批量创建ref对象主要是方便我们解构使用，源码使用ref来的

 

7.watchEffect：
1.它是立即执行的，在页面加载时会主动执行一次，来收集依赖
2.不需要传递需要侦听的内容，它可以自动感知代码依赖，只需要传递一个回调函数
3.它不能获取之前数据的值
4.它的返回值用来停止此监听

 

8.watch : （watch也可以在setup中使用）(可监听具体值，跟vue2的一样)
1.具备一定的惰性 lazy （ 但可配置 immediate , 使其主动）
2.参数可拿到更改之前的值和更改之后的值
3.可以侦听多个数据的变化，用一个侦听器承载

 

9.配置全局属性（这里不能再使用Vue.prototype了）

app.config.globalProperties.$http = ''

 

10.在Vue2中,每次更新diff,都是全量对比,Vue3则只对比带有标记的,这样大大减少了非动态内容的对比消耗

 

vue-cli安装项目：https://blog.csdn.net/x550392236/article/details/119945472

vite安装项目：https://blog.csdn.net/qq_17627195/article/details/134197026