作用： 定义响应式变量。语法：let xxx = ref(初始值) 。返回值： 一个 RefImpl 的实例对象，简称 ref对象 或 ref ， ref 对象的 value属性是响应式的 。注意点：JS 中操作数据需要： xxx.value ，但模板中不需要 .value ，直接使用即可。对于 let name = ref('张三') 来说， name 不是响应式的， name.value 是响应式的。摘要：作用：定义响应式变量。语法：let xxx = ref(初始值) 。返回值：一个 RefImpl 的实例对象，简称 ref对象 或 ref ， ref 对象的 value属性是响应式的。注意点：JS 中操作数据需要： xxx.value ，但模板中不需要 .v
姓名：{{name}}
#技术分享年龄：{{age}}
修改名字年龄+1点我查看联系方式import {ref} from 'vue' // name 和 age 是一个 RefImpl 的实例对象，简称 ref 对象，它们的 value 属性是响应式的。let name = ref('张三') let age = ref(18) // tel 就是一个普通的字符串，不是响应式的 let tel = '13888888888'function changeName{ // JS 中操作 ref 对象时候需要.value name.value = '李四' console.log(name.value)// 注意：name 不是响应式的，name.value 是响应式的，所以如下代码并不会引起页面的更新。// name = ref('zhang-san') } function changeAge{ // JS 中操作 ref 对象时候需要.value age.value += 1 console.log(age.value) } function showTel{ alert(tel) } 作用： 定义一个 响应式对象 （基本类型不要用它，要用 ref ，否则报错）语法：let 响应式对象= reactive(源对象) 。返回值： 一个 Proxy 的实例对象，简称：响应式对象。注意点：reactive 定义的响应式数据是“深层次”的。汽车信息：一台{{ car.brand }}汽车，价值{{ car.price }}万
游戏列表：
{{ g.name }}测试：{{obj.a.b.c.d}}
修改汽车价格修改第一游戏测试import { reactive } from 'vue'// 数据 let car = reactive({ brand: '奔驰', price: 100 }) let games = reactive([ { id: 'ahsgdyfa01', name: '英雄联盟' }, { id: 'ahsgdyfa02', name: '王者荣耀' }, { id: 'ahsgdyfa03', name: '原神' } ]) let obj = reactive({ a:{ b:{ c:{ d:666 } } } })function changeCarPrice { car.price += 10 } function changeFirstGame { games[0].name = '流星蝴蝶剑' } function test{ obj.a.b.c.d = 999 }汽车信息：一台{{ car.brand }}汽车，价值{{ car.price }}万
游戏列表：
{{ g.name }}测试：{{obj.a.b.c.d}}
修改汽车价格修改第一游戏测试import { ref } from 'vue'// 数据 let car = ref({ brand: '奔驰', price: 100 }) let games = ref([ { id: 'ahsgdyfa01', name: '英雄联盟' }, { id: 'ahsgdyfa02', name: '王者荣耀' }, { id: 'ahsgdyfa03', name: '原神' } ]) let obj = ref({ a:{ b:{ c:{ d:666 } } } })console.log(car)function changeCarPrice { car.value.price += 10 } function changeFirstGame { games.value[0].name = '流星蝴蝶剑' } function test{ obj.value.a.b.c.d = 999 }ref 用来定义： 基本类型数据 、 对象类型数据 ；
reactive 用来定义： 对象类型数据 。
ref 创建的变量必须使用 .value （可以使用 volar 插件自动添加 .value ）。
若需要一个基本类型的响应式数据，必须使用 ref 。
若需要一个响应式对象，且层级较深，推荐使用 reactive 。
好了，今天的 ref 和 reactive 就先讲到这里，明天我们来唠唠 toRefs 与 toRef，感谢大家观看，我们明天见。
来源：墨码行者