Vue3/ Vue2 和 Vue3文件的区别 、Vue3 ( steup函数 )语法方法介绍

一 . Vue2 和 Vue3文件的区别

1.index.html Vue2在public文件夹里面 ， Vue3在src文件夹的外面

2.入口文件main.js Vue2是new Vue构造函数 里面绑定APP根组件

Vue3是 createApp这个函数 函数的参数是一个App根组件

3. Vue2 的Vscode 的插件 vetur 但是vue3的插件是 volar 开发vue3项目需要禁用 vetur

4.Vue3可以有多个元素并排 不一定只有一个根元素 root Vue2只有一个根元素

5.Vue3项目里面可以写Vue2的语法 可以加选择器api但是不推荐

6.自己在vscode里面配置一些代码片段 提升开发效率 

7.因为Vue3发布了很久了 最开始的语法 比较繁琐 然后经过两年的更新 使用新语法 script标签上面添加 setup属性 不用在 return导出了 js里面的变量 外面可以直接看见

二. Vue3 ( steup函数 )语法方法介绍

语法:

<script>
export default {
  setup () {
    const msg = 'hi vue3'

    return {

     msg

      }
  }
}
</script>

1.steup函数是一个新的组件选择 作为组件中的 compositionApi的起点

2. 从生命周期角度来看 steup会在 brforCreate钩子函数之前执行

3.staup中不能使用 this ， this指向的是 undefined

4.模板中不需要使用 数据 函数 ，需要在 steup 内返回

注意: steup是Vue3 钩子函数(生命周期) 代替了以前vue2de1 布尔forCreated 和 created 两个钩子函数