v2->v3
1、重写双向绑定
Object.defineProperty作的监听->ES6的proxy作的劫持
原因是前者对数组不太友好，需要重写数组；而且直接修改数组length是监听不到的
2、vdom性能瓶颈
3、Fragments
4、Tree-Shaking的支持
5、compositionApi
setup
可以在里面直接定义,类似于v2的data
比如
setup(){
let a = 1;
//必须返回出去外部才能用
return{a}
//如果是需要双方绑定的数值，需要
let b = ref(1s)
}
也支持setup语法糖格式 比如<script setup lang="ts"></script>
setup的值不是响应式的，如果v-model要使用响应式的今天遇到一个很骚气的写法非常骚气的时间点击，虽然感觉没什么用但是还剩记一下
<template/>
<p @[cl]="event">这是一个自定义事件</p>
<template>
<script lang="ts" >
setup(){
//这样的话只需要修改cl的值，可以改变p的事件，而省去了操作dom的步骤
const cl = 'click'
return {cl}
}
<script>
修饰符.stop .once .prevent阻止默认 .self .once注意点：
尽量不要与Vue2的配置混用
Vue2.x配置（data、methos、computed…）中可以访问到setup中的属性、方法。
但在setup中不能访问到Vue2.x配置（data、methos、computed…）。
如果有重名, setup优先。
setup不能是一个async函数，因为返回值不再是return的对象, 而是promise, 模板看不到return对象中的属性。（后期也可以返回一个Promise实例，但需要Suspense和异步组件的配合）
diff算法（vue 底层）
有key
即使数组顺序发送变化，key值也永远不变
要判断数据的type和key 如果一样的话才返回true，如果检测到不一样的值会跳过循环进行尾序对比
（比了头和头尾和尾）
3.如果发现多new和old相比多了一个则会去进行新增
如果发现少了一个则会进行一个卸载
无key
创建两个变量
首先通过for循环重新渲染这元素，然后去做删除，最后会新增（渲染不会复用）
ref与reactive，将数据转化为响应式，
ref接受基本数据类型。reactive接收一个对象和数组，返回一个proxy的实例对象
ref支持所有的数据类型
reactive只支持引用数据类型（如array、object、map、set等）
reactive是Vue3中提供实现响应式数据的方法.
在Vue2中响应式数据是通过defineProperty来实现的.
而在Vue3响应式数据是通过ES6的Proxy来实现的
reactive参数必须是对象(json/arr)
import {reactive,ref} from 'vue'ref函数
作用: 定义一个 ref 响应式的数据
语法: const xxx = ref(initValue)
创建一个包含响应式数据的引用对象（reference对象，简称ref对象）。
JS中操作数据： xxx.value
模板中读取数据: 不需要.value，直接：
使用ref函数需要注意三点：
接收的数据可以是：基本类型、也可以是对象类型。
基本类型的数据：响应式依然是靠Object.defineProperty()的get与set完成的。
对象类型的数据：内部求助了Vue3.0中的一个新函数—— reactive函数。
reactive函数
reactive只能定义一个对象、数组类型的响应式数据（基本类型不要用它，要用ref函数）
语法：const 代理对象= reactive(源对象)接收一个对象（或数组），返回一个代理对象（Proxy的实例对象，简称proxy对象）
- 直接监听对象，而非属性。
reactive定义的响应式数据是深层次的。
内部基于 ES6 的 Proxy 实现，通过代理对象操作源对象内部数据进行操作。
ref与reactive的区别
从定义数据角度对比：
ref用来定义：基本类型数据。
reactive用来定义：对象（或数组）类型数据。
备注：ref也可以用来定义对象（或数组）类型数据, 它内部会自动通过reactive转为代理对象。
从原理角度对比：
ref通过Object.defineProperty()的get与set来实现响应式（数据劫持）。
reactive通过使用Proxy来实现响应式（数据劫持）, 并通过Reflect操作源对象内部的数据。
从使用角度对比：
ref定义的数据：操作数据需要.value，读取数据时模板中直接读取不需要.value。
reactive定义的数据：操作数据与读取数据：均不需要.value。
TS中type的用法
computed用法，通常在购物车内计算数值
//选项式写法
import { ref, computed } from "vue";
let firstName = ref("张");
let lastName = ref("z");
let name = computed<string>({
get() {
return firstName.value + "-" + lastName.value;
},
set(newval) {}
//当值发送改变时候进行的操作
//newval为改变后的name
});
//getter函数写法，不允许修改值
let name = computed()=>{
//name.value = "李四" 错误写法，不能修改
}
get当值发送改变的时候会触发更新
set设置值的一个操作，newval为更变后的值vue_等多个请求执行完再执行下一个方法Promise.all用法
getData1() {
return new Promise((resolve, reject) => {
request1(requestParams).then((res) => {//接口1
xxx
resolve(res);
}).catch(e =>{
reject(e)
})
});
},
getData2() {
return new Promise((resolve, reject) => {
request2(requestParams).then((res) => {//接口2
xxx
resolve(res);
}).catch(e =>{
reject(e)
})
});
},
getData() {
this.addLoading()//开始loading
Promise.all([
this.getData1(),
this.getData2()
]).then(res => {
console.log(res);
setTimeout(() => {
this.hideLoading()//延时结束loading
}, 800);
})
}图片上传链接https://www.zhihu.com/question/313595404?utm_id=0
import { reactive, isReactive, readonly } from 'vue'
const plain = readonly({ name: 'Mary' })
console.log(isReactive(plain)) // -> falseisProxy
检查对象是否是由 reactive 或 readonly 创建的 proxy。
isReactive
检查对象是否是由 reactive 创建的响应式代理
v2与v3的配置文件
main.js
v2
import Vue from 'vue'
import App from './App.vue'
Vue.config.productionTip = false
new Vue({
render: h => h(App),
}).$mount('#app')v3
// 引入的不再是Vue构造函数了，引入的是一个名为createApp的工厂函数
import { createApp } from 'vue'
import App from './App.vue'
// 创建应用实例对象——app(类似于之前Vue2中的vm，但app是轻量级（部分API），vm是重量级（所有的API）)
const app = createApp(App)
console.log(app)
// 挂载
app.mount('#app')xxx.vue中v3的template标签不需要根目录标签
生命周期更变
beforeDestroy改名为 beforeUnmount
destroyed改名为 unmounted
beforeCreate==>setup()
created ==>setup()
beforeMount ==>onBeforeMount
mounted==>onMounted
beforeUpdate==>onBeforeUpdate
updated ==>onUpdated
beforeUnmount ==>onBeforeUnmount
unmounted ==>onUnmounted
Comments | NOTHING