前端框架之(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、
  • 源码分析
    原文作者:Andy
    原文地址: https://segmentfault.com/a/1190000018659572
    本文转自网络文章,转载此文章仅为分享知识,如有侵权,请联系博主进行删除。
点赞