网站建设单词,网站系统功能描述,建筑论坛,设计参考网站推荐Vue 3引入了两个新的API#xff0c;ref和reactive#xff0c;用于创建响应式对象。这两个方法都位于Vue.prototype上#xff0c;因此可以在组件实例中直接使用。
ref
ref函数用于创建一个响应式引用对象。这个函数可以接受一个普通的变量或对象作为参数#xff0c;并返回…Vue 3引入了两个新的APIref和reactive用于创建响应式对象。这两个方法都位于Vue.prototype上因此可以在组件实例中直接使用。
ref
ref函数用于创建一个响应式引用对象。这个函数可以接受一个普通的变量或对象作为参数并返回一个响应式引用对象。要访问这个引用的值需要使用.value属性。
例如
const count ref(0);
console.log(count.value); // 0count.value; // 响应式更新
console.log(count.value); // 1
在上面的例子中我们使用ref函数创建了一个响应式引用对象并将其初始值设置为0。然后我们可以通过.value属性来访问和修改这个引用的值。当修改这个值时Vue会自动更新相关的视图。
reactive
reactive函数用于创建一个响应式对象。这个函数可以接受一个普通的对象作为参数并返回一个响应式代理对象。这个代理对象会拦截所有的属性访问和修改操作并自动更新相关的视图。
例如
const state reactive({ count: 0 });
console.log(state.count); // 0state.count; // 响应式更新
console.log(state.count); // 1
在上面的例子中我们使用reactive函数创建了一个响应式对象并将其初始值设置为一个包含count属性的对象。然后我们可以通过直接访问和修改这个对象的属性来触发响应式更新。与ref不同的是我们不需要使用.value属性来访问和修改这个对象的属性。
Vue 3 使用 ref 和 reactive 创建响应式对象的完整示例
template
div
p{{ count }}/p
button clickincrementIncrement/button
/div
/templatescript
import { ref, reactive } from vue;export default {
setup() {
// 使用 ref 创建响应式引用对象
const count ref(1);// 使用 reactive 创建响应式对象
const state reactive({
count: 0,
});// 使用 increment 方法修改引用对象的值和响应式对象的属性值
const increment () {
count.value; // 修改引用对象的值
state.count; // 修改响应式对象的属性值
};return {
count,
state,
increment,
};
},
};
/script
在上面的示例中我们使用 ref 创建了一个名为 count 的响应式引用对象初始值为 1。我们还使用 reactive 创建了一个名为 state 的响应式对象其中包含一个名为 count 的属性初始值为 0。在 increment 方法中我们通过调用 count.value 和 state.count 来修改引用对象的值和响应式对象的属性值。由于这些变量都是响应式的因此当它们的值发生变化时相关的视图也会自动更新。
