vue3.js
    总结: 此处涉及的vue3新特性
    1, vue3中所有的变量定义,数据更新,函数执行,生命周期, 都建议写在setup中
    (setup中的所有变量,函数等叫做组合式API, vue3中称之为 Hook )
    2, vue3中定义值类型数据使用Vue.ref()函数, 会在外层包裹一层对象结构
    3, vue3中定义引用类型建议使用Vue.reactive()函数, 不会包裹对象
    4, setup中的所有变量,函数都需要在return中返回才能在模板中调用
    5, vue3使用ref()和reactive()定义的数据,更新时,视图总会刷新,所以废除了vue2中的$set更新函数和$forceUpdate强制更新
    6, Vue不再是构造函数,无法创建bus对象, 而且vue3废除了$on监听, 所以无法使用总线传值

    1. <body>
    2.     <script src='./vue3.js'></script>
    3.     <div id='myApp'>
    4.         <button @click="count1++">{{count1}}</button>
    5.         <!-- 模板中调用和修改响应式数据,不需要调用value属性 -->
    6.         <button @click="count2++">{{count2}}</button>
    7.         <button @click="add2">{{count2}}</button>
    9.         <button @click="zhangsan.age++">{{zhangsan.age}}</button>
    10.         <button @click="add3">{{zhangsan.age}}</button>
    12.         <button @click="arr1[0]++">{{arr1}}</button>
    13.         <button @click="add4">{{arr1}}</button>
    15.         <button @click="lisi.age++">{{lisi.age}}</button>
    16.         <button @click="add5">{{lisi.age}}</button>
    18.         <button @click="arr2[0]++">{{arr2}}</button>
    19.         <button @click="add6">{{arr2}}</button>
    20.     </div>
    21.     <script>
    22.         var vm = {
    23.             data() {
    24.                 return {
    25.                     count1: 0
    26.                 }
    27.             },
    28.             setup() {
    29.                 // vue3中使用Vue.ref()函数定义响应式数据, 参数是默认值
    30.                 const count2 = Vue.ref(0)
    31.                 // 返回值是一个对象,对象的value属性,才是真正的响应值
    32.                 console.log(count2, count2.value)
    33.                 // 定义更新函数, 需要调用value进行修改
    34.                 function add2(){
    35.                     count2.value++
    36.                 }
    38.                 // 使用Vue.ref定义对象结构
    39.                 const zhangsan = Vue.ref({age: 10})
    40.                 console.log(zhangsan, zhangsan.value.age)
    41.                 function add3(){
    42.                     zhangsan.value.age++
    43.                 }
    45.                 // 使用Vue.ref()定义数组结构
    46.                 const arr1 = Vue.ref([1,2,3])
    47.                 console.log(arr1, arr1.value, arr1.value[1])
    48.                 function add4(){
    49.                     arr1.value[1]++
    50.                 }
    52.                 // 使用Vue.reactive()定义对象, 
    53.                 const lisi = Vue.reactive({age: 20})
    54.                 // 返回值是一个代理对象, 可以直接调用对象中的字段
    55.                 console.log(lisi, lisi.age)
    56.                 function add5(){
    57.                     lisi.age ++
    58.                 }
    60.                 // 使用Vue.reactive()定义数组, 
    61.                 const arr2 = Vue.reactive([1,2,3])
    62.                 console.log(arr2, arr2[1])
    63.                 function add6(){
    64.                     arr2[1]++
    65.                 }
    67.                 // setup中的所有变量,函数都需要在return中返回才能在模板中调用
    68.                 return{
    69.                     count2, add2, zhangsan, add3, arr1, add4, lisi, add5, arr2, add6
    70.                 }
    71.             }
    72.         }
    73.         Vue.createApp(vm).mount('#myApp')
    74.     </script>
    75. </body>