- A+
所属分类：Web前端
Vue中的响应式对象
Vue3允许在setup()中定义组件需要的数据和方法, 通过return在模板中可以直接使用
-
reactive方法
<body> <div id = "Application"> </div> <script> const App = Vue.createApp({ setup() { let myData = Vue.reactive({ value: 0 }) function click() { myData.value += 1 console.log(myData.value) } return { myData, click } }, template: ` <h1>测试数据: {{myData.value}}</h1> <button @click = "click">单击</button> ` }) App.mount("#Application") </script> </body> // 使用这个方法对自定义的JavaScript对象进行包装, 为其添加响应性
独立的响应式值
- Vue提供的ref方法来定义响应式独立值, ref方法会帮我们完成对象的包装
<body> <div id = "Application"> </div> <script> const App = Vue.createApp({ setup() { let myObject = Vue.ref(0) function click() { myObject.value += 1 console.log(myObject.value) } return { myObject, click } }, template: ` <h1>测试数据: {{myObject}}</h1> <button @click = "click">单击</button> ` }) App.mount("#Application") </script> </body> // 在模板中使用setup中返回的使用ref定义的数据时, 数据对象会自动展开, 直接使用即可 - toRefs方法对响应式对象进行解构赋值
<body> <div id = "Application"> </div> <script> const App = Vue.createApp({ setup() { let myObject = Vue.reactive({ value: 0 }) let { value } = Vue.toRefs(myObject) // Vue会自动将解构的数据转换成ref对象变量, 在setup方法内部使用时, 要使用其内部包装的value属性 function click() { value.value += 1 console.log(value.value) } return { value, click } }, template: ` <h1>测试数据: {{value}}</h1> <button @click = "click">单击</button> ` }) App.mount("#Application") </script> </body> 计算变量
使用Vue提供的computed方法来创建计算变量
<body> <div id = "Application"> </div> <script> const App = Vue.createApp({ setup() { let a = Vue.ref(1); let b = Vue.ref(2); let sum = Vue.computed(() => { return a.value + b.value }); function click() { a.value += 1 b.value += 2 } return { sum, click } }, template: ` <h1>测试数据: {{sum}}</h1> <button @click = "click">单击</button> ` }) App.mount("#Application") </script> // 计算变量也支持被赋值 /** let sum = Vue.computed({ set(value) { a.value = 0 b.value = 0 } get() { return a.value + b.value } }) */ </body> 监听响应式变量
Vue提供的watchEffect方法和watch方法, 无需手动指定要监听的变量
Vue.watch(param, func) Vue.watchEffect(param, func) setup方法
setup方法会在组件创建前执行, 即对应组件的生命周期方法beforeCreate调用之前执行
组合式API的核心方法, 代码层面上将分离的相关逻辑点进行聚合
接受两个参数props 和 context
方法中可定义声明周期行为
