目录
2、vue3 安装和使用（详见官网https://v3.vuejs.org/）
1、性能变快
- diff算法优化：
vue2中虚拟dom 是全量比较，
vue3添加了静态标记，第一次生成虚拟doms时，发现有可变的虚拟dom节点（存在插值表达式）会给改虚拟dom增加flag标志 flag:1{{txt}}文本，
后期数据变化--第二次生成虚拟dom节点---只比较之前静态标记的dom节点，没有标记的不比较，则加快了速度
- 静态提升
vue2中数据没有变化的dom，之后创建的时候全部重复创建
vue3中数据没有变化的dom，直接复用，之后不重复创建
- 事件侦听器缓存
默认情况下onclick会被视为动态绑定，所以创建的时候每次都会去追踪它的变化，但是因为是同一个函数（存在静态标记），没有追踪它的变化，直接缓存复用
2、vue3 安装和使用（详见官网https://v3.vuejs.org/）
- 引入 vue@next
- 引入vite和vite-app
vite是尤大开发的类似cli的一个脚手架，可以快速创建vue项目
npm init vite-app [项目名称--可选(可以先不写)] ---- yarn install/npm install ---- yarn/npm dev 运行
3、组合API(Compostion API)
- 在vue2里面做功能开发的时候，每做一个小功能，都要分散到data(定义数据) methods(处理数据)等里面，这样对于代码的复用和维护不利。
好的思想：每一个功能的代码的数据，业务应该是组合在一起的
- setup（详见官网https://v3.vuejs.org/）----- vue3 提供的一个新的类似生命周期的函数，执行是在之前的vue2的created之前，并且里面没办法获取this
vue2在data里定义数据，在methods处理数据
例：data:function(){
return:{
a: 4,
list:[
1,
2,
3
]
}
}，
methods: {
change(){
this.list.push(this.a)
}
}vue3使用setup
1、展示数据
--- 不做任何处理下的数据默认是不具有响应式的，既后期数据变化视图不会更新，视图变化了，模型数据也不会变化
--- 解决方法： 实现数据响应式（双向数据绑定）=== 需要借助vue3提供的数据创建api进行数据包装处理使其成为响应式数据
vue2 做数据响应式使用： Object.defineProperty()
vue 3 做数据响应式使用： 使用es6的proxy对象 --- 须引入api: import { reactive , ref } from 'vue' === reactive vue3提供的函数，对对象和数组这种复合数据类型进行包装，返回一个新对象，该对象可以实现响应式; ref vue3提供的函数，对基本数据类型进行包装，返回一个新对象，该对象可以实现响应式
详见官网https://v3.vuejs.org/
ref 和 reactive api
ref包装的对象，在视图上直接使用，不需要加.value，setup里处理时需要加.value
ref本质也是reactive，ref(obj)等价于reactive({value: obj}) 例：let age = ref(18) 底层是 let age = reactive({value:18})
二者的区别：reactive只对对象类型有效，对基本数据类型无效
1、ref多用来定义基本数据类型（也可以定义对象，内部会自动通过reactive转为代理对象），而 reactive只能用来定义对象数组类型
2、ref操作数据需要.value，reactive操作数据不需要.value
3、ref通过Object.defineProperty()的get和set来实现响应式， reactive通过Proxy来实现响应式，并通过Reflect操作源对象内部的数据
shallowRef：
只有第一层是响应式的，即只有在更改.value的时候才能实现响应式，但是可以通过triggerRef()方法主动更新界面，实现界面刷新 例：let age = shallowRef（{f:{s:{c: 3}}}） age.value.f.s.c = 'c'; triggerRef(age);--- 主动更新页面
shallowReactive： 只有第一层是响应式的，并且没有类似triggerRef()的方法
toRaw：
有些时候我们不希望数据进行响应式实时更新，可以通过toRaw获取ref或reactive引用的原始数据，通过修改原始数据，不会造成界面的更新，只有通过修改ref和reactive包装后的数据时才会发生界面响应式变化。
例：let obj1 = {...};
//state和obj1是引用关系，state的本质是一个Proxy对象，其中引用了obj1
let state = reactive(obj1);
//通过toRaw方法获取到原始数据，其实是获取到obj1的内存地址，obj2和obj1是完全相等的
let obj2 = toRaw(state)
console.log(obj1 === obj2);//true
复制代码
4、tree shaking (摇树) 特性
按需引入需要的源码，减少源码文件大小，B/S加载文件的响应速度变快
例： import { reactive , ref , isRef , isReactive } from 'vue'
5、vue3 生命周期函数
- 名称发生了变化，api的调用方式发生了变化
需要引入 例： import { onMounted , onUpdated} from 'vue'
生命周期函数需要在setup里注册使用
例： setup(){
onMounted(()=>{
})
onUpdated(()=>{
})
}
6、watch
- 需要引入 例： import { watch} from 'vue'
watch(number1,(neVal,oldVal)=>{
}})
7、响应数据的原理
- Proxy es6提供的一个api，用于代理其他对象的行为，可以拦截代理对象的set和get操作（详见es6文档）
- vuejs底层是拦截所有的模型变量，给每个模型变量都设置get和set操作达到响应式数据的操作
8、vue3 和 vue2 比较大的区别：
- vue3是ts改写
- 数据劫持api Proxy
- 组合
- 按需导入
9、toRefs
将一个响应式对象转换为一个普通对象，这个普通对象的每个属性都是指向源对象相应属性的 ref。每个单独的 ref 都是使用 toRef() 创建的。
toRefs 在调用时只会为源对象上可以枚举的属性创建 ref。如果要为可能还不存在的属性创建 ref，请改用 toRef。
10、toRef
基于响应式对象上的一个属性，创建一个对应的 ref。这样创建的 ref 与其源属性保持同步：改变源属性的值将更新 ref 的值，反之亦然。
扫一扫
1692
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
