vue 3.0试用比对

前言：vue 3.0测试版发布挺久了，闲来无事来对比一下！因为现实一点事情获得了“脑震荡”成就，而且我也不是大神,就不对源码进行分析了，这里就对vue 3.0的语法进行学习并且分析

vue2+
vue 3.0 目前3.0版本没有中文版，我是根据谷歌浏览器自带翻译进行阅读，另外目前3.0加载贼慢~~~

• 脚手架安装
  都是习惯了脚手架开发的，我就不扯html-js引入那套了
  安装vue-cli

    npm install vue@next
    npm install -g @vue/cli
    npm init vite-app xxx
    cd xxx
    npm i || cnpm i
    npm run dev
  

• 目录结构

  
  image.png

• 出口文件及主文件变化

  • index.html

    
    image.png

  • main.js

    
    image.png
    

    根据文档，构建vue实例的方式从

 new Vue({
         el:'#app',
      })
// 变更为
const app = {}
vue.creat('app').mount('#app')

因此单页面中多个vue实例的问题能解决，目前还处于学习阶段，具体性能暂时没测试

• 模板模式下开发
  以往template 需要将所有的元素都包裹在一个主元素下，3.0版本已经没有这样的约束了。

• 生命周期

  
  image.png

将实例销毁更改为取消挂载函数
这里留一个空白

• 语法
  v-bind(:) 一样
  v-on（@） 一样
  v-on:[]，v-bind:[] 相同
  这里的变更比较复杂，你可以试用:key="fun()"了，虽然官方更推荐使用computed，但是这表示官方在3.0版本放宽了编写要求。
  添加了节流和防抖（官方福利

突然看到有趣的案例了，未完待续-----