- 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、
- 源码分析