前端框架之(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、
• 源码分析