共计 4314 个字符，预计需要花费 11 分钟才能阅读完成。
1. 生命周期
Created: 可改变数据，不会进入 beforeupdate, updatedMounted: 特殊情况监测不到数据的变更，会进入 beforeupdate, updatedbeforeupdate, updated：如果发生变更的数据在模板中并没有使用（包括直接和间接，间接：比如某个依赖该数据的计算属性在模板中使用了），则不会触发更新流程！！！
2. mixins,extends, Vue.extend, Vue.mixin(mixin)1) Vue.extend 创建一个构造器 Vue.component 是用来注册或获取全局组件的方法，其作用是将通过 Vue.extend 生成的扩展实例构造器注册（命名）为一个组件. 全局注册的组件可以在所有晚于该组件注册语句构造的 Vue 实例中使用.Vue.component(‘global-component’, Vue.extend(baseOptions));// 传入一个选项对象（自动调用 Vue.extend）, 等价于上行代码.Vue.component(‘global-component’, baseOptions);// 获取注册的组件（始终返回构造器）var MyComponent = Vue.component(‘my-component’)2) Vue.mixin(mixin) 全局注册一个混入，影响注册之后所有创建的每个 Vue 实例。3) extends , mixins 优先级：extends > mixins > 自身组件 mixins• 类型：Array<Object>extends• 类型：Object | Functionhttps://segmentfault.com/a/11…
3. ref ($refs) 如果在普通的 DOM 元素上使用，引用指向的就是 DOM 元素；如果用在子组件上，引用就指向组件实例 1) 组件 用 this.ref.name 获取到的是组件实例，可以使用组件的所有方法
全局
Vue.component(‘my-ref’,{
template:”<div ><h5> 我是子组件 </h5></div>”
} );
<my-ref ref=”my”></my-ref>
局部
components: {
Home
},
Home.vue
<li class=”mui-table-view-cell mui-media mui-col-xs-4 mui-col-sm-3″ ref=”contact”>
<a href=”#”>
<span class=”mui-icon”></span>
<div class=”mui-media-body”> 联系我们 </div>
</a>
</li>
console.log(this.$refs)
{contact: li.mui-table-view-cell.mui-media.mui-col-xs-4.mui-col-sm-3}
父组件不包含 2）普通的元素 用 this.ref.name 获取到的是 dom 元素
<p ref=”out”>ref 在外面的元素上 </p>
mounted() {
console.log(this)
console.log(this.$refs.out)
console.log(this.$refs.out.innerHTML)
console.log(this.$refs)
}
<p>ref 在外面的元素上 </p>
ref 在外面的元素上
{out: p}
因为 ref 本身是作为渲染结果被创建的，在初始渲染的时候你不能访问它们 – 它们还不存在！$refs 也不是响应式的，因此你不应该试图用它在模板中做数据绑定。
3) 当 v-for 用于元素或组件的时候，引用信息将是包含 DOM 节点或组件实例的数组。
<ul v-for=”item in items”>
<li ref=”itemli”>{{item}} </li>
</ul>
console.log(this.$refs.itemli)
console.log(this.$refs.itemli[0])
[li, li, li, li, li]0: li1: li2: li3: li4: lilength: 5__proto__: Array(0)
<li>1 </li>
4. $root parent 都能够实现访问父组件的属性的方法，两者的区别在于，如果存在多级子组件，通过 $parent 访问得到的是它最近一级的父组件，通过 $root 访问得到的是根组件。
5. 依赖注入 provide 和 inject 主要为高阶插件 / 组件库提供用例。并不推荐直接用于应用程序代码中。这对选项需要一起使用，以允许一个祖先组件向其所有子孙后代注入一个依赖，不论组件层次有多深，并在起上下游关系成立的时间里始终生效。
6. 程序化的事件侦听器清理只需要用到一次的变量
7. 插槽 <slot></slot> v-slot/# 父传子 1）具名插槽子组件:
<div class=”container”>
<header>
<slot name=”header”></slot>
</header>
<main>
<slot></slot>
</main>
<footer>
<slot name=”footer”></slot>
</footer>
</div>
父组件：
<base-layout>
<template v-slot:header>
<h1>Here might be a page title</h1>
</template>
<template v-slot:default>
<p>A paragraph for the main content.</p>
<p>And another one.</p>
</template>
<template v-slot:footer>
<p>Here’s some contact info</p>
</template>
</base-layout>
注意 v-slot 只能添加在一个 <template> 上 2）作用域插槽子组件：
<span>
<slot v-bind:user=”user”>
{{user.lastName}}
</slot>
</span>
父组件：
<current-user>
<template v-slot:default=”slotProps”>
{{slotProps.user.firstName}}
</template>
</current-user>
<current-user v-slot=”slotProps”>
{{slotProps.user.firstName}}
</current-user>
3) $slots 用来访问被插槽分发的内容。每个具名插槽 有其相应的属性 (例如：v-slot:foo 中的内容将会在 vm.$slots.foo 中被找到)
9. 深度作用选择器如果你希望 scoped 样式中的一个选择器能够作用得“更深”，例如影响子组件，你可以使用 >>> 操作符：<style scoped>.a >>> .b {/ … /}</style> 有些像 Sass 之类的预处理器无法正确解析 >>>。这种情况下你可以使用 /deep/ 操作符取而代之
10. vue router 优缺点由 前端 来控制页面的跳转（但其实是个单页面），根据不同的 url 地址展示不同的内容和页面。
优点：体验好，不需要每次从服务器获取全部，快速展现给用户；
缺点：不利于 SEO；使用浏览器的前进，后退键的时候会重新发送请求，没有合理的利用缓存；单页面午饭记住之前滚动的位置，无法在前进和后退的时候记住滚动的位置。
11. route：url 的信息 Router：vue-router 实例
12. 权限控制动态菜单视图控制视图控制的目标是根据当前用户权限决定界面元素显示与否，典型场景是对各种操作按钮的显示控制。请求控制请求控制是利用 axios 拦截器实现的，目的是将越权请求在前端拦截掉，原理是在请求拦截器中判断本次请求是否符合用户权限，以决定是否拦截。
https://segmentfault.com/a/11…
https://refined-x.com/2017/09…
https://refined-x.com/2017/08…
https://juejin.im/post/591aa1…
13. 路由传参传参可以使用 params 和 query 两种方式。使用 params 传参只能用 name 来引入路由，即 push 里面只能是 name:’xxxx’, 不能是 path:’/xxx’, 因为 params 只能用 name 来引入路由，如果这里写成了 path，接收参数页面会是 undefined！！！。使用 query 传参使用 path 来引入路由。params 是路由的一部分, 必须要在路由后面添加参数名。query 是拼接在 url 后面的参数，没有也没关系。二者还有点区别，直白的来说 query 相当于 get 请求，页面跳转的时候，可以在地址栏看到请求参数，而 params 相当于 post 请求，参数不会再地址栏中显示。
动态路由：
getDescribe(id) {
// 直接调用 $router.push 实现携带参数的跳转
this.$router.push({
path: `/describe/${id}`,
})
方案一，需要对应路由配置如下：{
path: ‘/describe/:id’,
name: ‘Describe’,
component: Describe
} 很显然，需要在 path 中添加 /:id 来对应 $router.push 中 path 携带的参数。在子组件中可以使用来获取传递的参数值。this.$route.params.idhttps://zhuanlan.zhihu.com/p/…
14. delete 和 Vue.delete 删除数组的区别 delete 只是被删除的元素变成了 empty/undefined 其他的元素的键值还是不变。Vue.delete 直接删除了数组 改变了数组的键值。
15. 关于 computed 和 watch 的差异
computed 是计算一个新的属性，并将该属性挂载到 vm（Vue 实例）上，而 watch 是监听已经存在且已挂载到 vm 上的数据，所以用 watch 同样可以监听 computed 计算属性的变化（其它还有 data、props）
computed 本质是一个惰性求值的观察者，具有缓存性，只有当依赖变化后，第一次访问 computed 属性，才会计算新的值，而 watch 则是当数据发生变化便会调用执行函数
从使用场景上说，computed 适用一个数据被多个数据影响，而 watch 适用一个数据影响多个数据；
16. Vue 组件 data 为什么必须是函数• 每个组件都是 Vue 的实例。• 组件共享 data 属性，当 data 的值是同一个引用类型的值时，改变其中一个会影响其他。
