vue3的语法

1.vue3基本结构

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
            },

vue3废除了filters过滤器，不再支持此语法

2，vue3生命周期

2.1 创建vue3代码片段

vscode打开，文件–首选项–用户片段—新建全局代码片段–MyVue3，创建之后在文件中复制以下代码即可：

{
  "vue3": {
    "scope": "html",
    "prefix": "myVue3",
    "body": [
      "<script src='https://unpkg.com/vue@next'></script>",
      "<div id='myApp'>",
        "\t",
      "</div>",
      "<script>",
        "\tvar vm = {",
          "\t\tsetup() {",
            "\t\t\t",
          "\t\t}",
        "\t}",
        "\tVue.createApp(vm).mount('#myApp')",
      "</script>",
    ],
    "description": "这是我的vue3结构的代码片段"
  }
}

2.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中返回才能在模板中调用

 const age = Vue.ref(0)

• 通过Vue.ref定义的数据，会被放入对象的value字段中
• 使用对象调用value字段才是动态数据
• vue3响应式数据在setup中使用Vue.ref()定义, 会包裹一层对象, 在js中使用时,调用value属性, 模板中不需要调value

2.4 vue3定义函数

          const add = ()=>{ }