Vue3.x 笔记

`Vue3.0` 六大亮点：

Performance：性能比 Vue2.x 快 2.2 倍。
Tree shaking support：按需编译，体积比 Vue2.x 更小。
Composition API：组合 API （类似 React Hooks）。
Better TypeScript support：更好的 TS 支持。
Custom Renderer API：暴露了自定义渲染 API。
Fragment，Teleport(Protal)，Suspense：更先进的组件。

`Vue3.0` 是如何变快的。

diff 方法优化：

Vue2.x 中虚拟 dom 是进行全量的对比。
Vue3.0 新增了静态标记（PatchFlag）。

在与上次虚拟节点进行对比时候，只对比带有 patch flag 的节点。

并且可以通过 flag 的信息得知当前节点要对比的具体内容。

hoistStatic 静态提升：

Vue2.x 中无论元素是否参与更新，每次都会重新创建。
Vue3.0 中对于不参与更新的元素，只会被创建一次，之后会在每次渲染的时候被不停的复用。

cacheHandlers 事件侦听器缓存

默认情况下 onClick 会被视为动态绑定，所以每次都会去追踪它的变化。但是因为是同一个函数，所以没有追踪变化，直接缓存起来复用即可。

SSR 渲染

当有大量静态内容的时候，这些内容会被当做纯字符串推进一个 buffer 里面，即使存在动态的绑定，会通过模板插值嵌入进去。这样比虚拟 dom 来渲染的快上很多。
当静态内容达到一定量级时候，会用 _createStaticVNode 方法在客户端生成一个 static node，这些静态 node，会被直接 innerHTML，就不需要创建对象，然后根据对象渲染。

组合API

setup 函数是组合 API 入口函数。

import { ref } from 'vue'

setup() {
    let count = ref(0)

    function fn() {
        console.log(count)
    }

    return { count, fn }; 
}

组合 API 中定义变量或者函数必须 return 暴露给外界；定义方法不必定义到 methods中，直接在组合 API 中定义即可。

Ref 只能监听简单类型的变化，不建议监听复杂类型（数组/对象等）的变化。

Reactive 可以监听复杂类型的变化。


setup() {
    let list = reactive({
        lists: [{id: 1, name: 'zs'}]
    })

    return {list}
}

组合 `API` 本质：

在 setup 中注册的变量或函数，会自动注册到 vue2.x 中的 data 或 methods 中。

注意点：

执行setup 函数，是在 beforeCreate 钩子之前完成的。
在 setup 函数中，无法使用 data 和 methods。
在 setup 函数中，this 指向 undefined。
setup 函数只能是同步的不能是异步的。

Reactive

什么是 Reactive。

Reactive 是 Vue3.0 中提供的实现响应式数据的方法。
在 Vue2.0 中响应式数据是通过 defineProperty 实现，在 Vue3.0 中响应式数据通过 ES6 的 Propxy 实现。

Reactive 注意点：

Reactive 函数是对象(json 或 arr)。
在创建响应式数据时，传递的不是对象，则无法更新视图。
如果给 Reactive 传递其他对象：
- 默认情况下修改对象，界面不会自动更新。
- 如果想更新，可以通过重新赋值的方式。


setup() {
    let state = reactive({
        time: new Date()
    })

    function fn() {
        const newTime = new Date(state.time.getTime())
        newTime.setDate(state.time.getDate() + 1)
        state.time = newTime
    }

    return { state, fn}
}

Ref

什么是 Ref。

Ref 是用来实现响应式数据的方法。
由于 Reactive 传入一个对象，导致在开发中如果只想让某个变量实现响应式时会比较麻烦，因此 Vue3.0 提供了 Ref 方法，实现对简单值的监听。

Ref 本质：

Ref 底层的本质还是 Reactive。

系统会自动根据给 Ref 传入的值将它转化为 ref(xx) –> reactive({value: xx})

ref 注意点：

在 Vue 中使用 Ref 的值，不用通过 value 获取。
在 JS 中使用 Ref 的值必须通过 value 获取。

`ref` 与 `reactive` 区别

如果在 template 中使用 Ref 类型的数据，Vue 会自动帮我们添加 .value。
如果在 template 中使用 Reactive 类型的数据，Vue 不会自动帮我们添加 .value。

如何决定是否需要自动添加 .vlue

Vue 解析数据之前，会自动判断这个数据是否是 Ref 类型的；如果是，就自动添加 .value，如果不是就不自动添加 .value。

如何判断当前的数据是否是 Ref 类型

通过当前数据的 __v_ref 来判断的。如果有这个私有属性，并且取值为 true，就代表是一个 Ref 类型的数据。

如何自行判断是 Ref，还是 Reactive

通过 isRef 和 isReactive。


import {ref, isRef, isReactive} from 'vue'

setup() {
    let count = ref(18)

    console.log(isRef(count))
    console.log(isReactive(count))
    return {count}
}

递归监听

默认情况下，无论是通过 Ref 还是 Reactive 都是递归监听。

递归监听存在的问题：

如果数据量较大时，非常消耗性能。

创建递归监听，如：

<template>
    <p>{{state.a}}</p>
</template>

import {reactive} from 'vue'

export default {
    setup() {
        let state = reactive({
            a: 'a',
            gf: {
                b: 'b',
                f: {
                    c: 'c',
                    s: {
                        d: 'd'
                    }
                }
            }
        })

        state.a = 1;
        state.gf.b = 2

        console.log(state.a, state, state.gf.b, state.gf)
        return {state}
    }
}

监听到每一层数据变化，界面 UI 更新数据。

非递归监听

非递归监听：只能监听第一层，不能监听其他层；即只有第一层包装成 proxy。

创建非递归监听，使用 shallowReactive 和 shallowRef。

注意点：

如果是通过 shallowReactive 创建数据，只要第一层数据变化，就会更新界面 UI 第二层，第三层等等数据；如果第一层数据不更新，界面 UI 不会更新。
如果是通过 shallowRef 创建数据，Vue 监听的是 .value 的变化，并不是第一层数据的变化。
如果是通过 shallowRef 创建数据，想监听第 n 层数据，并主动更新 UI 界面，这时使用 triggerRef方法。
Vue3.0 只提供了 triggerRef 方法，没有提供 triggerReactive 方法；因此如果使用 triggerReactive 类型的数据，无法主动触发更新界面。

<template>
    <p>{{ state.a }}</p>
    <p>{{ state.gf.b }}</p>
</template>

import {reactive} from 'vue'

export default {
    setup() {
        let state = shallowReactive({
            a: 'a',
            gf: {
                b: 'b',
                f: {
                    c: 'c',
                    s: {
                        d: 'd'
                    }
                }
            }
        })

        /*
        let state = shallowRef({
            a: 'a',
            gf: {
                b: 'b',
                f: {
                    c: 'c',
                    s: {
                        d: 'd'
                    }
                }
            }
        })

       // state.a.value = 1;
       // state.gf.b.value = 2

        state.gf.f.s.d.value = 4;
        triggerRef(state)

        */

        state.a = 1;
        state.gf.b = 2

        console.log(state.a, state, state.gf.b, state.gf)
        return {state}
    }
}

`shallowRef` 的本质

shallowRef 底层调用 shallowReactive，即： shallowRef(18) --> shallowReactive({value: 18})。

如果是通过 shallowRef 创建的数据，它监听的是 .value 的变化。因为底层本质上 .value 才是第一层。

import {reactive} from 'vue'

export default {
    setup() {
        let state = shallowReactive({
            value: {
                a: 'a',
                gf: {
                    b: 'b',
                    f: {
                        c: 'c',
                        s: {
                            d: 'd'
                        }
                    }
                }
            }
        })

        /*
        let state = shallowRef({
            a: 'a',
            gf: {
                b: 'b',
                f: {
                    c: 'c',
                    s: {
                        d: 'd'
                    }
                }
            }
        })

        state.a.value = 1;
        state.gf.b.value = 2

        */

        state.a = 1;
        state.gf.b = 2

        console.log(state.a, state, state.gf.b, state.gf)
        return {state}
    }
}

toRaw

例子：

<template>
    <p>{{obj.name}}</p>
</template>

export default {
    setup() {
        let obj = { name: 'zs', age: 18 }
        obj.name = 'ming'

        return {obj}
    }
}

修改名字数据发生改变，UI 没有更新，即不是响应式数据。如果先变成响应式使用 Ref 或者 Reactive。

<template>
    <p>{{state.name}}</p>
</template>

import {reactive} from 'vue'

export default {
    setup() {
        let obj = { name: 'zs', age: 18 }
        //obj.name = 'ming'

        let state = reactive(obj);
        state.name = 'ming'

        console.log(obj == state) // false

        return {state}
    }
}

从上述得知，state 与 obj 是引用关系，state 引用了 obj。

如果直接修改 obj，是无法触发界面更新。

只有通过包装之后的对象修改，才会触发界面更新。

从 Reactive 中获取原始数据

<template>
    <p>{{state.name}}</p>
</template>

import {reactive, toRaw} from 'vue'

export default {
    setup() {
        let obj = { name: 'zs', age: 18 }
        let state = reactive(obj);

        state.name = 'ming'

        let obj2 = toRaw(state)

        console.log(obj2, obj == obj2)

        return {state}
    }
}

Ref 或 Reactive 数据类型，每次修改都会被追踪，UI 界面都会被更新，这样非常消耗性能。如果有一些不需要追踪，不需要更新 UI 界面，这时就可以通过 toRaw 方法拿到原始数据，对原始数据进行修改，就不会被追踪，不会更新 UI 界面，性能提高。

从 Ref 中获取原始数据

<template>
    <p>{{state.name}}</p>
</template>

import {ref, toRaw} from 'vue'

export default {
    setup() {
        let obj = { name: 'zs', age: 18 }
        let state = ref(obj);

        state.name = 'ming'

        let obj2 = toRaw(state.value)

        console.log(obj2, obj == obj2)

        return {state}
    }
}

从 Ref 中获取原始数据必须添加 .value，因为 Ref 底层是使用 Reactive。

markRaw

如果原始值永远不想被追踪变化，使用 markRaw。

例子：

<template>
	<p>{{state}}</p>
</teamplate>

import {reactive, markRaw} from 'vue'

export default{
	setup() {
		let obj = {name: 'zs', age: 18}
		obj = markRaw(obj)
		let state = reactive(obj)

		state.name = 'cherry'

		return {state}
	}

}

toRef

和 Ref 一样，都是创建响应式数据。

使用 Ref 打印输出值：

<template>
	<p>{{state}}</p>
</teamplate>

import {reactive, ref} from 'vue'

export default{
	setup() {
		let obj = {name: 'zs', age: 18}
		let state = ref(obj.name)

		state.value = 'cherry'
		console.log(obj, state)

		return {state}
	}

}

结论：

如果使用 Ref 将某一个对象中的属性变成响应式的数据，修改响应式数据是不会影响到原始数据。
如果响应式数据通过 Ref 创建，修改了数据并会触发 UI 界面更新。
相当于 Ref 是复制一份原始值。

使用 roRef 打印输出值：

<template>
	<p>{{state}}</p>
</teamplate>

import {reactive, toRef} from 'vue'

export default{
	setup() {
		let obj = {name: 'zs', age: 18}
		let state = toRef(obj, 'name')
		
		console.log(state)
		state.value = 'cherry'
		console.log(obj, state)

		return {state}
	}

}

结论：

如果使用 toRef 将某一个对象中的属性变成响应式的数据，修改响应式数据会影响到原始数据。
如果响应式数据通过 toRef 创建，修改了数据并不会触发 UI 界面更新。
toRef 的本质是引用原始值。

应用场景：

如果让响应式数据和以前的数据关联起来，并且更新响应式数据之后并不想更新 UI 界面，就可以使用 toRef。

roRefs

如果数据是多个字段，使用 toRef 就必须写多个字段重新赋值：

<template>
	<p>{{state}}</p>
</teamplate>

import {reactive, toRef} from 'vue'

export default{
	setup() {
		let obj = {name: 'zs', age: 18}
		let state = toRef(obj, 'name')
		let age = toRef(obj, 'age')
		
		state.value = 'cherry'
		age.value = 20
		console.log(obj, state)

		return {state}
	}

}

上述可以通过 toRefs 简化，底层逻辑还是通过 toRef 实现。

<template>
	<p>{{state}}</p>
</teamplate>

import {reactive, toRefs} from 'vue'

export default{
	setup() {
		let obj = {name: 'zs', age: 18}
		let state = toRefs(obj)
		
		console.log(obj, state)
		state.name.value = 'cherry'
		state.age.value = 20
		
		return {state}
	}

}

customRef

理解为自定义 Ref。

返回一个 Ref 对象，可以显式的控制以来追踪和触发相应。

<template>
	<p>{{state}}</p>
</teamplate>

import {ref, customRef} from 'vue'

export default{
	setup() {
		let state = myRef(18)

		state.value = 20;
		
		return {state}
	}

}


function myRef(value) {
	return customRef((track, trigger) => {
		//track -> 追踪 
		//trigger -> 触发
		return {
			get(){
				track() //告诉Vue 这个数据是需要追踪变化
				return value
			},
			set(newVal) {
				value = newVal
				trigger() // 告诉Vue触发界面更新
			}
		}
	})
}

具体查看 Vue3.0 官方文档API。

Ref 获取元素

在 Vue2.x 中，可以通过给元素添加 ref=’xxx’，然后在代码中通过 refs.xxx 方式获取元素。

在 Vue3.0 中，也可以通过 ref 获取元素，使用写法不同：


<template>
	<div ref="box">box</div>
</template>

import {ref, onMounted} from 'vue'

export default {
	setup() {
		let box = ref(null)

		onMounted(() => {
			console.log(box.value) // ②
		})

		console.log(box.value) // ①

		return {box}
	}
}

readonly家族

readonly：用于创建一个只读的数据，并且是递归只读。


<template>
	<div>{{ state }}</div>
</template>

import {readonly} from 'vue'

export default {
	setup() {
		const value = {name: 'ls', age: 26}

		let state = readonly({
			name: 'zs',
			attr{
				age: 18,
				height: 1.88
			}
		})

		state.name = 'cherry'
		state.attr.age = 20
		state.attr.height = 1.77


		value.name = 'xing'
		value.age = 66

		console.log(value)

		return {state}
	}
}

结论：

修改响应式数据，修改后的数据没变化，UI 界面数据没变化。

const 和 readonly区别：

const：赋值保护，不能给变量重新赋值
readonly：属性保护，不能给属性重新赋值

shallowReadonly：用于创建一个第一层只读的数据。


<template>
	<div>{{ state }}</div>
</template>

import {shallowReadonly} from 'vue'

export default {
	setup() {
		let state = shallowReadonly({
			name: 'zs',
			attr{
				age: 18,
				height: 1.88
			}
		})

		state.name = 'cherry'
		state.attr.age = 20
		state.attr.height = 1.77

		return {state}
	}
}

结论：

修改响应式数据，修改后的数据第一层没发生变化，第二层数据发生变化，并且 UI 界面没更新。

isReadonly：用于判断是否是 Readonly。


<template>
	<div>{{ state }}</div>
</template>

import {isReadonly,shallowReadonly} from 'vue'

export default {
	setup() {
		let state = shallowReadonly({
			name: 'zs',
			attr{
				age: 18,
				height: 1.88
			}
		})

		state.name = 'cherry'
		state.attr.age = 20
		state.attr.height = 1.77

		console.log(isReadonly(state))

		return {state}
	}
}

Vue3响应式数据本质

Vue2.x 是通过 defineProperty 实现响应式数据。
Vue3.0 是通过 Proxy 实现响应式数据。

模拟：


let obj = { name: 'zs', age: 18 }

let state = new Proxy(obj, {
	get(obj, key) {
		return obj[key]
	},
	set(obj, key, newVal) {
		obj[key] = newVal
		return true
	}
})

state.name = 'cherry'

console.log(state)

实现 shallowReactive


function shallowReactive(obj) {
	return new Proxy(obj, {
		get() {
			return obj[key]
		},
		set(obj, key, newVal) {
			obj[key] = newVal
			return true
		}
	})
}


let obj = {
	a: 'a',
	gf: {
		b: 'b',
		f: {
			c: 'c'
		}
	}
}

let state = shallowReactive(obj)

state.a = 1
state.gf.b = 2
state.gf.f.c = 3

console.log(state)

实现 shallowRef


function shallowRef(val) {
	return shallowReactive(obj: {value: val})
}

let state = shallowRef(obj)

state.value.a = 1
state.value.gf.b = 2
state.value.gf.f.c = 3

console.log(state)

实现 Reactive


function Reactive(obj) {

	if(typeof obj === 'object') {

		if(obj instanceof Array) {
			// 如果是一个数组，那取出数组中的每一个元素
			// 判断每一个元素是否又是一个对象，如果又是一个对象，那么也需要包装Proxy
			obj.forEach((item, index) => {
				if(typeof item === 'object') obj[index] = Reactive(item) 
			})

		}else{
			// 如果是一个对象，那么取出对象属性的取值
			// 判断对象属性的取值是否又是一个对象，如果是一个对象，那么也需要包装成 Proxy

			for(let key in obj) {
				let item = obj[key]
				if(typeof item === 'object') obj[key] = Reactive(item) 
			}
		}

		return new Proxy(obj, {
			get() {
				return obj[key]
			},
			set(obj, key, newVal) {
				obj[key] = newVal
				return true
			}
		})
	}else{
		console.log(`${obj} is not object`)
	}
}


let obj = {
	a: 'a',
	gf: {
		b: 'b',
		f: {
			c: 'c'
		}
	}
}

let state = Reactive(obj)

state.a = 1
state.gf.b = 2
state.gf.f.c = 3

console.log(state)

实现 Ref


function Ref(val) {
	return Reactive(obj: {value: val})
}

Vue3.0 六大亮点：

Vue3.0 是如何变快的。

组合 API 本质：

Reactive

Ref

ref 与 reactive 区别

递归监听

非递归监听

shallowRef 的本质

toRaw

markRaw

toRef

roRefs

customRef

Ref 获取元素

readonly家族

Vue3响应式数据本质

实现 shallowReactive

实现 shallowRef

实现 Reactive

实现 Ref

`Vue3.0` 六大亮点：

`Vue3.0` 是如何变快的。

组合 `API` 本质：

`ref` 与 `reactive` 区别

`shallowRef` 的本质