Vue ref，reactive 响应式引用

本文主要是介绍Vue ref，reactive 响应式引用，希望对大家解决编程问题提供一定的参考价值，需要的开发者们随着小编来一起学习吧！

// ref , reactive 响应式引用
// 原理，通过proxy 对数据进行封装，当数据变化时，触发模版等内容的更新
// ref 处理基础类型的数据
// reactive 处理非基础类型数据如：数组，对象等


<script>
// ref , reactive 响应式引用
// 原理，通过proxy 对数据进行封装，当数据变化时，触发模版等内容的更新
// ref 处理基础类型的数据
// reactive 处理非基础类型数据 如：数组，对象等方法一：简单使用 ref，监听属性变化方法二：简单使用 reactive 监听对象变化// setup // 创建 vue实例const app = Vue.createApp({// ref 时，使用name如： {{name}}// reactive 时，使用name如： {{nameObj.name}}template:  `<div >{{nameObj.name}}</div>`,// created 实例被完全初始化之前// 可以直接使用setup(props, context) {// 不能在里面用 this关键词// 不能调用外部函数// 方法一： 使用 ref/*const {ref} = Vue;// proxy， ‘dell’ 变成 proxy（{value: 'lee'}）这样的一个响应式引用let name = ref('dell');setTimeout(() => {name.value = 'lee'}, 2000)return {name}*/// 方法二：  使用 reactive// proxy， {name: 'dell'} 变成 proxy（{name: 'lee'}）这样的一个响应式引用const {reactive} = Vue;const nameObj = reactive({name: 'dell'});setTimeout(() => {nameObj.name = 'lee'}, 2000)return {nameObj}}});const vm = app.mount('#root');</script>

如果想

<script>
// ref , reactive 响应式引用
// 原理，通过proxy 对数据进行封装，当数据变化时，触发模版等内容的更新
// ref 处理基础类型的数据
// reactive 处理非基础类型数据 如：数组，对象等// setup // 创建 vue实例const app = Vue.createApp({// ref 时，使用name如： {{name}}// reactive 时，使用name如： {{nameObj.name}}template:  `<div >{{nameObj.name}}</div>`,// created 实例被完全初始化之前// 可以直接使用setup(props, context) {// 不能在里面用 this关键词// 不能调用外部函数// 方法一：/*const {ref} = Vue;// proxy， ‘dell’ 变成 proxy（{value: 'lee'}）这样的一个响应式引用let name = ref('dell');setTimeout(() => {name.value = 'lee'}, 2000)return {name}*/// 方法二：// proxy， {name: 'dell'} 变成 proxy（{name: 'lee'}）这样的一个响应式引用//    const {reactive} = Vue;//    const nameObj = reactive({name: 'dell'});//    setTimeout(() => {//         nameObj.name = 'lee'//     }, 2000)//     return {//         nameObj//     }// 方法三：// proxy， {name: 'dell'} 变成 proxy（{name: 'lee'}）这样的一个响应式引用// 对响应式 只读属性//    const {reactive, readonly} = Vue;//    const nameObj = reactive({name: 'dell'});//    // 只读属性//    const copyNameObj = readonly(nameObj);//    setTimeout(() => {//         nameObj.name = 'lee'//         copyNameObj.name = 'lei'//     }, 2000)//     return {//         nameObj,//         copyNameObj//     }// 方法四：// 注意 toRefsconst {reactive, readonly, toRefs} = Vue;const nameObj = reactive({name: 'dell', age: 28});// toRefs proxy({name:'dell', age: 28}), { name: proxy({value: 'dell'}) , age: proxy({value: 28})}setTimeout(() => {nameObj.name = 'lee'}, 2000)return {nameObj,}}});const vm = app.mount('#root');</script>