Vue响应式

  • Vue响应式已关闭评论
  • 71 次浏览
  • A+
所属分类:Web前端
摘要

Vue3允许在setup()中定义组件需要的数据和方法, 通过return在模板中可以直接使用

Vue中的响应式对象

Vue3允许在setup()中定义组件需要的数据和方法, 通过return在模板中可以直接使用

  1. 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对象进行包装, 为其添加响应性 

独立的响应式值

  1. 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定义的数据时, 数据对象会自动展开, 直接使用即可 
  1. 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

方法中可定义声明周期行为