Vue2: 选项式api
Vue3: 组合式api
Vue2.0和vue3.0响应式原理对比****
1 Vue2.0响应式原理
1.Vue2.0中使用ES5中的Object.defineProperty（数据劫持）方法实现响应式数据（监听数据变化，更新DOM）
- 缺点
1.无法监测到对象属性的动态添加和制除
2.无法监测到数组的下标和length属性的变更
3.解决方案
1.Vue2.0提供Vue.set方法用于动态给对象添加属性
$set(‘对象’，‘属性名’，‘值’)
$set(‘数组’，‘角标’，‘值’)
2. Vue2.0提供Vue.delete方法用于动态删除对象的属性
$delete(‘对象’，‘属性名’，)
$delete(‘数组’，‘角标’，)
3. 重写vue中数组的方法，用于监测数组的变更
Vue3.0响应式原理
1.Vue3.0中使用ES6中的proxy语法实现响应式数据
优点
1. 可以检测到代理对象属性的动态添加和删除
2. 可以监测到数组的下标和length属性的变更
缺点
1. ES6的proxy语法对于低版本浏览器不支持，IE11
2. Vue3.0会针对于IE11出一个特殊的版本用于支持ie11
Vue3 composition APl vue2 options api****
Options APl 选项api
-
Options APl的优点是容易学习和使用，代码有明确的书写位置
-
Options APl的缺点就是相似逻辑不容易复用，在大项目中尤为明显。
3.Options API可以通过mixins提取相同的逻辑，但是容易发生命名冲突且来源不清晰
Composition AP| 组合API
1. Composition APl是根据逻辑功能来组织代码的，，一个功能所有的api放到一起
2.即便项目很大，功能很多，都能够快速的定位到该功能所有的API
3.Composition APl提供了代码可读性和可维护性
Vue3.0中推荐使用compositionAPl,也保留了options APl.3.
Setup()****
1:Setup函数是一个新的组件选项,作为组件中composition APl的起点
2. 从生命周期钩子的角度来看，setup会在beforeCreate钩子函数之前执行
3. Setup中不能使用this，this指向undefined
reactive()****
reactive()函授接收一个对象,返回该对象的响应式代理
let obj = reactive({ name: "小米", age: 18 });
ref()****
1:ref函数接收简单数据类型,返回一个响应式对象,该对象只有一个属性value
2:在模版中使用ref数据类型,会自动解析value属性
toRefs()****
1:reactive()函数响应式功能是赋予对象的,如果将对象展开会,会丢失数据响应式能力
2:torefs()函数能保证展开的对象属性都是响应式的
...torefs({name:’小明’,age:15})
readOnly()****
1:只读,不能修改值
计算属性****
1:传入一个getter()函数,返回一个只读的计算属性
let jAge = ref(15);
let mAge = computed(() => {
return Number(jAge.value) + 1;
});
2:传入一个对象,包括get()跟set(),返回一个可修改的计算属性
let jAge = ref(15);
let mAge = computed(() => {
return Number(jAge.value) + 1;
});
let hAge = computed({
get() {
return Number(jAge.value) + 2;
},
set(value) {
jAge.value = value - 2;
},
});
监听属性****
1:watch监听接收三个参数
参数1:监听数据源
参数2:新值,旧值回调函数
参数3:监听对象配置(深层监听,立即执行)
2:watch可以监听单个或者多个数据源
3:watch会有返回值停止监听
Vue3生命周期****
Provide/Inject：****
用于祖先组件向后代组件传递数据，通过 Provide 提供数据，通过 Inject 注入数据。祖先组件通过 provide 提供数据，后代组件通过 inject 接收数据。
V ue3.0 ref使用****
创建空的ref
Const test=ref(null)
test.value.innerHTML=’哈哈’
