一、Vue2处理响应式的源码方式:
const initData = {
value: 1
}
const data = {};
Object.keys(initData).forEach(key => {
Object.defineProperty(data, key, {
get() {
return initData[key]
},
set(value) {
initData[key] = value
}
})
})
console.log(data.value) // 1
initData.value2 = 4;
console.log(initData.value2) // 4
console.log(data.value2) // undefined
修改initData.value2的值,data值没有修改,这是因为初始化劫持时已经拿到了initData所有的key,然后使用Object.defineProperty来修改getter和setter方法,如果再用initData.value2 = 4方法修改,data是拿不到更新的值的
因此,在Vue2中有几种修改方式是无法更新data值的:
- 当你利用索引直接设置一个项时,例如:vm.items[indexOfItem] = newValue
- 当你修改数组的长度时,例如:vm.items.length = newLength
为了解决第一类问题,以下两种方式都可以实现和 vm.items[indexOfItem] = newValue 相同的效果,同时也将触发状态更新:
// Vue.set
Vue.set(example1.items, indexOfItem, newValue)
// Array.prototype.splice
example1.items.splice(indexOfItem, 1, newValue)
为了解决第二类问题,你可以使用 splice:
example1.items.splice(newLength)
为了解决Vue2中的问题,Vue3进行了修改
二、Vue3处理响应式的方式
const initData = {
value: 1
}
const proxy = new Proxy(initData, {
get(target, key, receiver) {
return Reflect.get(target, key, receiver)
},
set(target, key, value, receiver) {
return Reflect.set(target, key, value, receiver);
}
})
console.log(proxy.value)
proxy.value = 2
console.log(proxy.value)
Reflect与Proxy的handler结合,修改getter和setter方法,实现数据劫持响应
三、Vue3响应式的使用方式
在 Vue 3 中,ref
、reactive
、shallowReactive
、shallowRef
、toRefs
和toRef
都用于处理响应式数据,但它们之间存在一些区别。
一、ref
ref
用于创建一个响应式的数据对象,内部包含一个值,访问时需要通过 .value
属性。
示例代码:
<template>
<div>
<p>{{ counter }}</p>
<button @click="increment">Increment</button>
</div>
</template>
<script>
import { ref } from 'vue';
export default {
setup() {
const counter = ref(0);
const increment = () => {
counter.value++;
};
return {
counter,
increment
};
}
};
</script>
在这个例子中,counter
是一个使用ref
创建的响应式变量,通过修改counter.value
来更新其值,视图也会随之更新。
注意:
ref只追踪对 .value 的直接修改
。如果 .value 是一个对象,内部属性的修改不会自动触发响应
。但可以通过 reactive 包裹 .value 内部的对象来实现深度响应性。
例如:const objRef = ref({ prop: 1 }); objRef.value.prop = 2;
(这不会触发响应,除非使用特殊方法如 Vue.set(objRef.value, 'prop', 2)
)。
二、reactive
reactive
用于创建一个响应式的对象。它会深度响应式地追踪对象内所有属性的变化。
示例代码:
<template>
<div>
<p>{{ person.name }}</p>
<p>{{ person.age }}</p>
<button @click="updatePerson">Update Person</button>
</div>
</template>
<script>
import { reactive } from 'vue';
export default {
setup() {
const person = reactive({
name: 'John',
age: 30
});
const updatePerson = () => {
person.name = 'Jane';
person.age++;
};
return {
person,
updatePerson
};
}
};
</script>
这里,person
对象是使用reactive
创建的响应式对象,修改其属性会触发视图更新。
reactive深度响应式地追踪对象内所有属性的变化
。当对象的属性被修改时,会自动触发响应。
例如:const obj = reactive({ prop: 1 }); obj.prop = 2;
(这会触发响应)。
因此:
- 如果只是对值的响应式请用ref
- 如果是对复杂对象的响应式请用reactive
三、shallowReactive
shallowReactive
创建一个响应式对象,但只对对象的第一层属性进行追踪,不会深度追踪嵌套对象的属性变化。
示例代码:
<template>
<div>
<p>{{ shallowPerson.name }}</p>
<p>{{ shallowPerson.age }}</p>
<p>{{ shallowPerson.nestedObj.prop }}</p>
<button @click="updateShallowPerson">Update Shallow Person</button>
</div>
</template>
<script>
import { shallowReactive } from 'vue';
export default {
setup() {
const shallowPerson = shallowReactive({
name: 'John',
age: 30,
nestedObj: {
prop: 'initial'
}
});
const updateShallowPerson = () => {
shallowPerson.name = 'Jane';
shallowPerson.age++;
// 修改嵌套对象的属性,不会触发视图更新
shallowPerson.nestedObj.prop = 'updated';
};
return {
shallowPerson,
updateShallowPerson
};
}
};
</script>
四、shallowRef
shallowRef
创建一个响应式的引用,但只追踪对其 .value
的直接修改,不会深度追踪其 .value
内部属性的变化。
示例代码:
<template>
<div>
<p>{{ shallowRefValue.num }}</p>
<button @click="updateShallowRefValue">Update Shallow Ref Value</button>
</div>
</template>
<script>
import { shallowRef } from 'vue';
export default {
setup() {
const shallowRefValue = shallowRef({ num: 1 });
const updateShallowRefValue = () => {
// 直接修改 shallowRefValue.value 会触发更新
shallowRefValue.value = { num: 2 };
// 修改 shallowRefValue.value 内部属性不会触发更新
shallowRefValue.value.num = 3;
};
return {
shallowRefValue,
updateShallowRefValue
};
}
};
</script>
五、toRefs
toRefs
用于将一个响应式对象转换为一组属性的引用,这样可以在解构响应式对象时保持属性的响应性。
示例代码:
<template>
<div>
<p>{{ name }}</p>
<p>{{ age }}</p>
<button @click="updatePerson">Update Person</button>
</div>
</template>
<script>
import { reactive, toRefs } from 'vue';
export default {
setup() {
const person = reactive({
name: 'John',
age: 30
});
// 使用 toRefs 将 person 转换为一组引用
const { name, age } = toRefs(person);
const updatePerson = () => {
person.name = 'Jane';
person.age++;
};
return {
name,
age,
updatePerson
};
}
};
</script>
六、toRef
toRef
创建一个对响应式对象中某个特定属性的引用。
示例代码:
<template>
<div>
<p>{{ personName }}</p>
<button @click="updatePersonName">Update Person Name</button>
</div>
</template>
<script>
import { reactive, toRef } from 'vue';
export default {
setup() {
const person = reactive({
name: 'John',
age: 30
});
const personName = toRef(person, 'name');
const updatePersonName = () => {
personName.value = 'Jane';
};
return {
personName,
updatePersonName
};
}
};
</script>
综上所述,ref
和reactive
分别用于创建单个响应式值和对象,shallowReactive
和shallowRef
提供了更浅层的响应性追踪,toRefs
用于在解构响应式对象时保持属性的响应性,toRef
用于创建对特定属性的引用。在实际应用中,可以根据具体需求选择合适的方法来处理响应式数据。
四、watch
watch(()=> state.count, (val, oldVal)=>{
console.log('watch', val, oldVal)
})
watch([()=> state.count, ()=> state.name], ([val1, val2], [oldVal1, oldVal2])=>{
这里有两种,一种是监听单个,一种是监听数组
五、 Vue 3 相比 Vue 2 有很多新特性
以下是一些主要的方面:
一、性能提升
-
编译优化:
- 静态提升(Static Hoisting):Vue 3 在编译阶段会分析模板,将静态的节点提升到渲染函数之外,避免在每次渲染时重复创建。这可以提高运行时的性能,特别是在大型应用中。
- 补丁算法优化:Vue 3 的虚拟 DOM 补丁算法更加高效,能够快速识别和更新变化的部分,减少不必要的 DOM 操作。
- 事件监听缓存:对于频繁触发的事件监听器,Vue 3 会进行缓存,避免在每次更新时重新绑定事件监听器,提高性能。
-
体积更小:Vue 3 进行了优化,整体包体积更小,使得应用加载更快,占用的网络带宽更少。
二、组合式 API(Composition API)
- 更好的逻辑复用:组合式 API 允许开发者将相关的逻辑封装在函数中,然后在不同的组件中复用这些函数。这使得逻辑复用更加灵活和可维护,避免了在 Vue 2 中使用 mixins 可能带来的命名冲突和不清晰的问题。
- 更清晰的代码结构:通过组合式 API,可以将组件的逻辑按照功能进行分组,使得代码结构更加清晰,易于理解和维护。例如,可以将数据获取、状态管理、副作用处理等分别封装在不同的函数中。
- 响应式系统改进:Vue 3 的响应式系统基于 Proxy 对象实现,相比 Vue 2 的 Object.defineProperty 更加高效和强大。可以直接监听对象和数组的变化,而不需要进行额外的处理。
三、Teleport(传送门)
Vue 3 引入了 Teleport 组件,允许将一个组件的模板内容传送到指定的 DOM 节点中,而不是在组件的父级层次结构中渲染。这在处理模态框、弹出窗口等场景时非常有用,可以将这些元素渲染到页面的特定位置,而不受组件层次结构的限制。
四、Fragments(片段)
在 Vue 2 中,组件的模板必须有一个根元素。而在 Vue 3 中,可以使用 Fragments,即组件的模板可以没有根元素,多个元素可以直接作为组件的模板内容。这使得模板更加灵活,特别是在处理复杂的布局时。
五、Emits 选项的改进
Vue 3 对组件的 emits 选项进行了改进,使其更加严格和明确。可以在 emits 选项中定义组件触发的事件名称和参数类型,从而提高代码的可读性和可维护性。
六、更好的 TypeScript 支持
Vue 3 对 TypeScript 的支持更加友好,提供了更好的类型推断和类型定义。组合式 API 与 TypeScript 结合使用时,可以获得更好的类型安全和代码提示。
七、Suspense(异步组件加载)
Vue 3 改进了异步组件的加载方式,引入了 Suspense 组件,可以在异步组件加载过程中显示加载状态或错误信息。这使得异步组件的使用更加方便和用户友好。
这些只是 Vue 3 的一些主要新特性,还有其他一些小的改进和优化。总的来说,Vue 3 在性能、开发体验和功能方面都有了很大的提升,为开发者提供了更强大的工具来构建高效、可维护的前端应用。