vue3.js

    1.         总结: 此处涉及的vue3新特性<br />            1, vue3中监听器有两种监听方式, <br />            2, vue3对值类型数据和数组中某个字段或数据的监听可以监听到新老值的变化<br />            3, vue3对数组或对象整体监听, 只能监听到最新值<br />            4, vue3不再使用深度监听即可监听到任意响应数据的变化(包括数组通过索引改数据)
    1. <body>
    2.     <script src='./vue3.js'></script>
    3.     <div id='myApp'>
    4.         <button @click="count++">{{count}}</button>
    5.         <button @click="obj.age++">{{obj.age}}</button>
    6.         <button @click="arr[1]++">{{arr}}</button>
    7.     </div>
    8.     <script>
    9.         var vm = {
    10.             // vue2的监视器写法
    11.             watch: {
    12.                 count(a,b){
    13.                     console.log("vue2-count", b, a)
    14.                 },
    15.                 obj: {
    16.                     handler(a,b){
    17.                         console.log("vue2-obj1", b.age, a.age)
    18.                     },
    19.                     deep: true
    20.                 },
    21.                 'obj.age'(a,b){
    22.                     console.log("vue2-obj2", b, a)
    23.                 }
    24.             },
    25.             setup() {
    26.                 const count = Vue.ref(0)
    27.                 // 使用Vue.watch()监视数据的变化, 参数一是监视目标, 参数二是回调
    28.                 // vue3监视器写法一,  参数1是响应式对象
    29.                 Vue.watch(count, (newValue, oldValue)=>{
    30.                     console.log('vue3-count-1', oldValue, newValue)
    31.                 })
    32.                 // vue3监视器写法二,  参数1是函数,函数返回值是数据
    33.                 Vue.watch(()=>count.value, (newValue, oldValue)=>{
    34.                     console.log('vue3-count-2', oldValue, newValue)
    35.                 })
    36.                 // ()=>{return count.value}  === count.value ?   不等价
    37.                 // (()=>{return count.value})()  === count.value ?  等价
    40.                 // 对象的监听
    41.                 const obj = Vue.reactive({age: 0})
    42.                 // 第一种写法相当于vue2的深度监听, 只能监听到新值
    43.                 Vue.watch(obj, (newValue, oldValue)=>{
    44.                     console.log("vue3-obj-1", oldValue.age, newValue.age)
    45.                 })
    46.                 // 第二种写法相当于vue2中的单个字段监听, 一次只能监听一个字段的新老值
    47.                 Vue.watch(()=>obj.age, (newValue, oldValue)=>{
    48.                     console.log("vue3-obj-2", oldValue, newValue)
    49.                 })
    51.                 // 数组的监听
    52.                 const arr = Vue.reactive([1,2,3])
    53.                 Vue.watch(arr, (newValue, oldValue)=>{
    54.                     console.log("vue3-arr-1", oldValue[1], newValue[1])
    55.                 })
    56.                 Vue.watch(()=>arr[1], (newValue, oldValue)=>{
    57.                     console.log("vue3-arr-2", oldValue, newValue)
    58.                 })
    61.                 return{
    62.                     count, obj, arr
    63.                 }
    64.             }
    65.         }
    66.         Vue.createApp(vm).mount('#myApp')
    67.     </script>
    68. </body>