前端框架之(2) - vue技術棧

• vue-cli使用及版本3區別（舊項目改造、新項目搭建）

• 版本變動

  • slot/slot-scope 改成 v-slot。該指令自 Vue 2.6.0 起被引入，提供更好的支持 slot 和 slot-scope 特性的 API 替代方案。在接下來全部的 2.x 版本中 slot 和 slot-scope 特性仍會被支持，但已經被官方廢棄且不會出如今 Vue 3 中。
  • 從 2.6.0 開始，能夠用方括號括起來的 JavaScript 表達式做爲一個指令的參數：v-bind:[attributeName]="url"
  • vue3

• slot

  • name
  • 插槽props
  • 做用域：父級模板裏的全部內容都是在父級做用域中編譯的；子模板裏的全部內容都是在子做用域中編譯的。
• template
• nexttick 原理

• 父子組件交互

  var child = {
         created: function(){
             this.$on('click-child', function(){
                 console.log('send ajax here');
             });
         },
         template: '<div></div>'
     };
     
     var app = {
         template: '<div><button v-on:click="clickParent">點擊</button><child v-ref:child></child><div>',
         methods: {
             clickParent: function(){
                 this.$refs.child.$emit('click-child');
             }
         },
         components: {
             child: child
         }
     };

• computed/watch區別：一個屬性變化，須要更新多個屬性用watch；多個屬性變化，致使更新一個屬性用computed
• $props/$attr的區別：

• 組件

  • prop：組件能夠接受任意的特性，而這些特性會被添加到這個組件的根元素上。子父組件class、style屬性合併，其餘屬性替換。若是你不但願組件的根元素繼承特性，你能夠在組件的選項中設置 inheritAttrs: false。inheritAttrs: false 選項不會影響 style 和 class 的綁定。
  • 事件：始終使用 kebab-case 的事件名。
  • v-model：默認會利用名爲 value 的 prop 和名爲 input 的事件，能夠用組件的 model 選項替換默認的value和input事件。（2.2.0+）
  • .native $listeners
  • .sync
  • switch 在沒綁定v-model時，change不生效，能夠使用this.$set設置
  • <keep-alive>
  • 動態組件：<component v-bind:is="who"></component>
  • 異步組件：() => import(/ webpackChunkName: "login" / 'views/root/login.vue')，處理加載狀態

• 處理邊界狀況

  • $root、$parent、
• 源碼分析