Vue3的一些基本语法

1.1 vue3创建根组件

vue2中的vue是一个构造函数，创建根组件用new关键字创建

const vm = new Vue({})

vue3中vue是一个对象，创建根组件如下：

const app = Vue.createApp({})

1.2 vue3引入根标签

app.mount(“#myApp”)
vue3使用mount()函数渲染组件模板，作用相当于vue2的el属性

1.3 setup函数

vue3中新增了一个setup函数，相当于生命周期函数，他会在beforeCreate之前被调用，所以setup中不能使用this

            setup(props) {
                console.log("setup", this) // window
            },

2 vue3生命周期

vue2中的生命周期写法，vue3可兼容。vue3中把生命周期全部放在setup函数中实现

vue3中创建过程的两个钩子已经被废除，销毁前和销毁后钩子被改成onbeforeUnmount、onUnmounted vue3中调用生命周期钩子用到组合式API(Hook inside) vue3钩子之间不能用逗号，否则会报错

setup(a,b,c) {
                Vue.onBeforeMount(() => {
                    console.log("beforeMount")
                });
                Vue.onMounted(() =>{
                    console.log("mounted")
                })
                Vue.onBeforeUpdate(() => {
                    console.log("beforeUpdate")
                })
                Vue.onUpdated(() => {
                    console.log("updated")
                })
                Vue.onBeforeUnmount(() => {
                    console.log("beforeUnmount")
                })
                Vue.onUnmounted(() => {
                    console.log("unmounted")
                })
            }

2.3 vue3定义动态数据

vue2中使用data定义数据,定义后用this调用并修改, 但是setup中不能用this, 所以vue3中的动态数据不要在data中定义了,在setup中定义

Vue.ref定义动态数据，setup中所有的变量或函数都需要在return中返回才能在模板中调用**

vue3响应式数据在setup中使用Vue.ref()定义, 会包裹一层对象, 在js中使用时,调用value属性, 模板中不需要调value

2.4 vue3定义函数

          const add = ()=>{ }