前言：
vue3的版本测试版本，正式版本发布到现在也是有很长的时间了，我们这里总结下vue3.0相对于我们vue2新增，改变的一些内容。
vue官方入口
一、生命周期：（更多相关：入口）
1、去掉了vue2.0中的 beforeCreate 和 created 两个阶段，同样的新增了一个 setup
2、beforeMount 挂载之前 改名 onBeforeMount
3、mounted 挂载之后 改名 onMounted
4、beforeUpdate 数据更新之前 改名 onBeforeUpdate
5、updated 数据更新之后 改名 onUpdated
6、beforeDestroy 销毁前 改名 onBeforeUnmount
7、destoryed 销毁后 改名 onUnmounted
8、errorCaptured 报错 改名 onErrorCaptured| Vue2.x | Vue3.x |
|---|---|
| beforeCreate | setup |
| created | setup |
| beforeMount | onBeforeMount |
| mounted | onMounted |
| beforeUpdate | onBeforeUpdate |
| updated | onUpdated |
| beforeDestroy | onBeforeUnmount |
| destroyed | onUnmounted |
| activated | onActivated |
| deactivated | onDeactivated |
| errorCaptured | onErrorCaptured |
| - - | onRenderTracked |
| - - | onRenderTriggered |
初始化加载顺序：
setup => beforeCreate => created => onBeforeMount => onMounted二、新增函数：setup
setup 函数会在 beforeCreate 之前调用，因为此时组件的 data 和 methods 还没有初始化，
因此 在 setup 中是不能使用 this 的。
所以 Vue 为了避免我们错误的使用，它直接将 setup 函数中的 this 修改成了undefined。
setup函数，只能是同步的不能是异步的setup 函数是 Vue3 中新增的生命周期函数，它是我们在编写组件时，使用 Composition API 的入口，setup 函数接收两个参数 props和 context，
语法为：
setup(props,context){}props
props 里面包含父组件传递给子组件的所有数据。在子组件中使用 props 进行接收。
props 是响应式的， 当传入新的 props 时，会及时被更新。
由于是响应式的， 所以不可以使用 ES6 解构，解构会消除它的响应式。
父组件：
<template>
<!-- 父组件向子组件传递数据 -->
<Sub :name="name" :age="age" />
</template>
<script>
import { ref } from 'vue'
import Sub from './Sub.vue'
export default {
setup () {
const name = ref('张三');
const age = ref(20)
return { name, age }
},
components: { Sub },
}
</script>
子组件（Sub.vue）:
<template>
<div>{{name}}{{age}}</div>
</template>
<script>
export default {
props: {
name: String,
age: Number
},
mounted () {
// vue2.x 的写法
console.log(this.name); // 张三
console.log(this.age); // 20
},
setup (props) {
// vue3.x 的写法
console.log(props.name); // 张三
console.log(props.age); // 20
// let { name ,age } = props; // 不能直接解构
let { name, age } = toRefs(props);
console.log(name.value, age.value); // 张三 20
}
}
</script>
context
context 里面包含 attrs, slots, emit 等数据方法：
attrs：获取组件上的属性slots：获取 slot 插槽的节点emit：emit 方法（子组件向父组件传递数据）
父组件：
<template>
<Sub subData="some other data" @subClick='subClick'>parent</Sub>
</template>
<script>
import Sub from './Sub.vue'
export default {
setup () {
function subClick (e) {
console.log(e); // 接收子组件传递过来的数据
}
return { subClick }
},
components: { Sub },
}
</script>
子组件（Sub.vue）:
<template>
<!-- 父组件向子组件传递数据 -->
<div @click="handleClick">Child</div>
</template>
<script>
export default {
mounted () {
// vue2.x 获取组件上的属性
console.log(this.$attrs.subData); // 'some other data'
// vue2.x 获取slot插槽的节点
console.log(this.$slots);
},
methods: {
// vue2.x emit方法(子组件向父组件传递数据)
handleClick () {
this.$emit('subClick', 'vue2.x - this is subData')
},
},
setup (props, context) {
let { attrs, slots, emit } = context;
// vue3.x 获取组件上的属性
console.log(attrs.subData); // 'some other data'
// vue3.x 获取slot插槽的节点
console.log(slots.default());
// vue3.x emit方法(子组件向父组件传递数据)
function handleClick () {
emit('subClick', 'vue3.x - this is subData');
}
return { handleClick }
}
}
</script>
三、ref 获取dom元素，ref 与 reactive
创建一个响应式数据
- ref：任意类型（建议基本类型）数据的响应式引用（设置、获取值时需要加
.value）。
ref 的本质是拷贝，修改数据是不会影响到原始数据。 - reactive：只能是复杂类型数据的响应式引用
vue2.0中：
1、页面上定义：
<div ref='abc'><div>2、拿dom：
this.$refs.abcvue3.0中：
1、使用场景-echarts图中用ref获取dom
<div ref='echart'><div>
import { onMounted,toRefs, ref,reactive } from 'vue';
setup(){
//1、定义
let state = reactive({
echart: ref(),
})
const echartInit = () =>{
//2、在方法中使用
var myChart = echarts.init(state.echart);
...
}
return {
//3、发送出来
...toRefs(state),
};
}2、使用场景-初始化直接获取ref的元素
<div ref="box">
I am div
</div>
import { onMounted, ref} from 'vue';
setup(){
let box = ref(null)
//挂载
onMounted(()=>{
console.log('box.value', box.value)
})
return {
box
}
}四、toRef 与 toRefs
也可以创建一个响应式数据
- toRef：用来给抽离响应式对象中的某一个属性，并把该属性包裹成 ref 对象，使其和原对象产生链接。
toRef 的本质是引用，修改响应式数据会影响原始数据。 - toRefs：用来把响应式对象转换成普通对象，把对象中的每一个属性，包裹成 ref 对象。
toRefs 就是 toRef 的升级版，只是toRefs 是把响应式对象进行转换，其余的特性和 toRef 无二
<template>
<ul>
<li>{{name1}}</li>
<li>{{name2.name.value}}</li>
<li>{{name}}</li>
</ul>
</template>
<script>
import { toRef, toRefs, reactive } from 'vue'
export default {
setup () {
let nameObj1 = reactive({ name: '张三' });
let name1 = toRef(nameObj1, 'name');
let age1 = toRef(nameObj1, 'age '); // age不存在
setTimeout(() => {
name1.value = 'zhangsan';
age1.value = 20; // 即便age不存在也能正常响应式赋值
}, 1000)
let nameObj2 = reactive({ name: '张三' });
let age2 = toRef(nameObj3, 'age '); // age不存在
let name2 = toRefs(nameObj2);
setTimeout(() => {
name2.name.value = 'zhangsan';
age2.value = 20; // age不存在，赋值无反应
}, 2000)
let nameObj3 = reactive({ name: '张三' });
setTimeout(() => {
nameObj3.name = 'zhangsan';
}, 3000)
let { name } = toRefs(nameObj3); // 解构后仍需保持响应式
return { name1, name2, name }
}
}
</script>
五、watch 与 watchEffect 监听属性
watch函数：
用来侦听特定的数据源，并在回调函数中执行副作用。
默认情况是惰性的，也就是说仅在侦听的源数据变更时才执行回调。watchEffect函数：
1.立即执行、立即监听（immediate）
2.自动会感知代码依赖（自动收集依赖），不需要传递监听的内容（不需要像watch一样手动传入依赖）
3.无法获得变化前的值（oldVal）
六、readonly 只读属性
表示响应式对象不可修改
<template>
<ul>
<li>{{nameObj.name}}</li>
</ul>
</template>
<script>
import { reactive, readonly } from 'vue'
export default {
setup () {
let nameObj = reactive({ name: '张三' });
let readonlyObj = readonly(nameObj); // 对nameObj响应式对象设置成只读,不可修改
setTimeout(() => {
readonlyObj.name = 'zhangsan'; // 无法设置属性 => Set operation on key "name" failed: target is readonly. Proxy {name: "张三"}
}, 1000)
return { nameObj }
}
}
</script>
七、computed 计算属性
<template>
<div>
<button @click="add">+</button>
<p>{{addCount}}</p>
</div>
</template>
<script>
import { ref, computed } from 'vue'
export default {
setup () {
const num = ref(0);
const add = () => {
num.value++
}
// 计算属性
const addCount = computed(() => {
return num.value * 2;
})
return { add, addCount }
}
}
</script>
八、provide 与 inject
父组件向子组件传递数据与方法
父组件：
<template>
<Sub />
</template>
<script>
import { ref, provide } from 'vue'
import Sub from './Sub.vue'
export default {
setup () {
const name = ref('张三');
// provide(别名, 要传递的数据和方法)
provide('myName', name)
provide('handleClick', () => {
name.value = 'zhangsan';
})
},
components: { Sub },
}
</script>
子组件(Sub.vue)：
<template>
<div @click="handleClick">{{name}}</div>
</template>
<script>
import { inject } from 'vue'
export default {
setup () {
//调用 inject 方法，通过指定的别名，接收到父级共享的数据和方法
const name = inject('myName');
const handleClick = inject('handleClick');
return { name, handleClick }
}
}
</script>
九、Teleport 传送门
个人理解：跟全局插槽一样，一个统一的元素，具体页面修改内容，
Teleport 翻译过来是传送的意思，就像是哆啦 A 梦中的 「任意门」 ，任意门的作用就是可以将人瞬间传送到另一个地方。
举例：
我们希望 Dialog 渲染的 dom 和顶层组件是兄弟节点关系, 在 App.vue 文件中定义一个供挂载的元素：
<template>
<router-view />
<div id="model"></div> <!-- 挂载点 -->
</template>
定义一个 Dialog 组件 Dialog.vue , 留意 to 属性， 与上面的 id选择器 一致：
<template>
<teleport to="#model">
<!-- 挂载内容 -->
<div>title</div>
<div>I'am a Dialog.</div>
</teleport>
</template>
DOM 渲染效果如下：
我们使用 teleport 组件，通过 to 属性，指定该组件渲染的位置在 App.vue 中，但是 Dialog 又是完全由 Dialog.vue 组件控制。
十、Suspense
Suspense组件用于在等待某个异步组件解析时显示后备内容。
在 Vue2.x 中经常遇到这样的场景：
<template>
<div>
<div v-if="!loading">
<!-- 异步渲染 -->
...
</div>
<div v-if="loading">
加载中...
</div>
</div>
</template>
。。。
