摘要：注意重点是获取更新后的就是在开发过程中有个需求是需要在阶段操作数据更新后的节点这时候就需要用到就是用来知道什么时候更新完成原因在钩子函数执行的时候其实并未进行任何渲染，而此时进行操作无异于徒劳，所以在中一定要将操作的代码放进的回调函数中。

el: dom节点

data: 数据

    
    
    



    

        
 {{ message }}
        
    
    

由于js的限制，Vue 不能检测以上数组的变动，以及对象的添加/删除，很多人会因为像上面这样操作，出现视图没有更新的问题。

this.$set(你要改变的数组/对象，你要改变的位置/key，你要改成什么value)

this.$set(this.arr, 0, "aa"); // 改变数组
this.$set(this.obj, "c", "cc"); // 改变对象

数组原生方法触发视图更新:
Vue可以监测到数组变化的，数组原生方法:

 splice()、 push()、pop()、shift()、unshift()、sort()、reverse()

    
    
    



    

        
arr:{{arr}}
        
obj:{{obj}}
        修改数组
        改变数组
        增加和删除对象
        修改对象
        this.$set
    
    

    
    
    



    

        
{{message | filterTest}}
    
    

v-if尽量不要与v-for在同一节点使用,因为v-for 的优先级比 v-if 更高,如果它们处于同一节点的话，那么每一个循环都会运行一遍v-if
如果你想根据循环中的每一项的数据来判断是否渲染，那么你这样做是对的:

 

  {{ todo }}

如果你想要根据某些条件跳过循环，而又跟将要渲染的每一项数据没有关系的话，你可以将v-if放在v-for的父节点：

// 数组是否有数据 跟每个元素没有关系

  

    {{ todo }}
  

No todos left!

正确使用v-for与v-if优先级的关系，可以为你节省大量的性能。

    
    




    

        
{{ message }}
    

    

beforecreated：el 和 data 并未初始化

created:完成了 data 数据的初始化，el没有

beforeMount：完成了 el 和 data 初始化

mounted ：完成挂载

另外在标绿处，我们能发现el还是 {{message}}，这里就是应用的 Virtual DOM（虚拟Dom）技术，先把坑占住了。到后面mounted挂载的时候再把值渲染进去。

有关于销毁，暂时还不是很清楚。我们在console里执行下命令对 vue实例进行销毁。销毁完成后，我们再重新改变message的值，vue不再对此动作进行响应了。但是原先生成的dom元素还存在，可以这么理解，执行了destroy操作，后续就不再受vue控制了。

beforecreate : 举个栗子：可以在这加个loading事件

created ：在这结束loading，还做一些初始化，实现函数自执行

mounted ： 在这发起后端请求，拿回数据，配合路由钩子做一些事情

beforeDestroy： 你确认删除XX吗？ destroyed ：当前组件已被删除，清空相关内容

https://segmentfault.com/a/11...

创建真实DOM的代价高：真实的 DOM 节点 node 实现的属性很多，而 vnode 仅仅实现一些必要的属性，相比起来，创建一个 vnode 的成本比较低。

2.触发多次浏览器重绘及回流：使用 vnode ，相当于加了一个缓冲，让一次数据变动所带来的所有 node 变化，先在 vnode 中进行修改，然后 diff 之后对所有产生差异的节点集中一次对 DOM tree 进行修改，以减少浏览器的重绘及回流

虚拟dom由于本质是一个js对象，因此天生具备跨平台的能力，可以实现在不同平台的准确显示。

Virtual DOM 在性能上的收益并不是最主要的，更重要的是它使得 Vue 具备了现代框架应有的高级特性。

例子

{
    tag: "div",                 /*说明这是一个div标签*/
    children: [                 /*存放该标签的子节点*/
        {
            tag: "a",           /*说明这是一个a标签*/
            text: "click me"    /*标签的内容*/
        }
    ]
}

渲染后可以得到

    click me

因为不使用return包裹的数据会在项目的全局可见，会造成变量污染

使用return包裹后数据中变量只在当前组件中生效，不会影响其他组件

当一个组件被定义， data 必须声明为返回一个初始数据对象的函数，因为组件可能被用来创建多个实例。如果 data 仍然是一个纯粹的对象，则所有的实例将共享引用同一个数据对象！通过提供 data 函数，每次创建一个新实例后，我们能够调用 data 函数，从而返回初始数据的一个全新副本数据对象。

为什么在组件中用js动态创建的dom，添加样式不生效

结果

// test生效   testAdd 不生效

.test[data-v-1b971ada]{ // 注意data-v-1b971ada
    background:blue;
    height:100px;
    width:100px;
}

原因

当

• a
• b

由于hash模式会在url中自带#，如果不想要很丑的 hash，我们可以用路由的 history 模式，只需要在配置路由规则时，加入"mode: "history"",这种模式充分利用了html5 history interface 中新增的 pushState() 和 replaceState() 方法。这两个方法应用于浏览器记录栈，在当前已有的 back、forward、go 基础之上，它们提供了对历史记录修改的功能。只是当它们执行修改时，虽然改变了当前的 URL ，但浏览器不会立即向后端发送请求

const router = new VueRouter({
  mode: "history",
  routes: [...]
})

当你使用 history 模式时，URL 就像正常的 url，例如 http://yoursite.com/user/id，比较好看！
不过这种模式要玩好，还需要后台配置支持。因为我们的应用是个单页客户端应用，如果后台没有正确的配置，当用户在浏览器直接访问 http://oursite.com/user/id 就会返回 404，这就不好看了。
所以呢，你要在服务端增加一个覆盖所有情况的候选资源：如果 URL 匹配不到任何静态资源，则应该返回同一个 index.html 页面，这个页面就是你 app 依赖的页面。

 export const routes = [ 
  {path: "/", name: "homeLink", component:Home}
  {path: "/register", name: "registerLink", component: Register},
  {path: "/login", name: "loginLink", component: Login},
  {path: "*", redirect: "/"}]

此处就设置如果URL输入错误或者是URL 匹配不到任何静态资源，就自动跳到到Home页面

一个指令定义对象可以提供如下几个钩子函数 (均为可选)

bind:只调用一次，指令第一次绑定到元素时调用。在这里可以进行一次性的初始化设置

2.inserted：被绑定元素插入父节点时调用 (仅保证父节点存在，但不一定已被插入文档中)。

update：所在组件的 VNode 更新时调用，但是可能发生在其子 VNode 更新之前。指令的值可能发生了改变，也可能没有。但是你可以通过比较更新前后的值来忽略不必要的模板更新 。

componentUpdated：指令所在组件的 VNode 及其子 VNode 全部更新后调用。

unbind：只调用一次，指令与元素解绑时调用。

    
    
    




    


        
        clickMe
        
it is a custom directive
    

    

https://www.cnblogs.com/wangr...
https://juejin.im/post/5a3933...

v-if按照条件是否渲染，v-show是display的block或none

key的作用主要是为了高效的更新虚拟DOM。

https://www.zhihu.com/questio...

在下次 DOM 更新循环结束之后执行延迟回调。在修改数据之后立即使用这个方法，获取更新后的 DOM。

注意：重点是获取更新后的DOM 就是在开发过程中有个需求是需要在created阶段操作数据更新后的节点 这时候就需要用到Vue.nextTick()

$nextTick就是用来知道什么时候DOM更新完成

在created()钩子函数执行的时候DOM 其实并未进行任何渲染，而此时进行DOM操作无异于徒劳，所以在created中一定要将DOM操作的js代码放进Vue.nextTick()的回调函数中。与之对应的就是mounted()钩子函数，因为该钩子函数执行时所有的DOM挂载和渲染都已完成，此时在该钩子函数中进行任何DOM操作都不会有问题

    
    
    




    

        
{{msg1}}
        
{{msg2}}
        点击我
    

    

    
    
    




    

        
{{msg}}
        点击我
    

    

https://juejin.im/post/5b6a60...

首先在定义路由的时候配置 meta 字段，自定义一个KeepAlive字段作为该页面是否缓存的标记

routes:[{
    path: "/search",
    name: "search",
    component: search,
    meta: {
        title: "搜索列表页",
        keepAlive: true // 标记列表页需要被缓存
    }
},
{
    path: "/detail",
    name: "detail",
    component: detail,
    meta: {
        title: "详情页",
        // 详情页不需要做缓存，所以不加keepAlive标记
    }
}]

由于组件不支持v-if指令，所以我们在App.vue中采用两个的写法，通过当前路由的keepAlive字段来判断是否对页面进行缓存：

使用提供的 exclude 或者 include 选项，此处我们使用 exclude ，在App.vue中：

需要注意的是，一定要给页面组件加上相应的name，例如在detail.vue中：

这么写就代表了在项目中除了name为detail的页面组件外，其余页面都将进行缓存。

父子通信：
父向子传递数据是通过 props，子向父是通过 events（$emit）；通过父链 / 子链也可以通信（$parent / $children）；ref 也可以访问组件实例；provide / inject API；$attrs/$listeners
兄弟通信：
Bus；Vuex
跨级通信：
Bus；Vuex；provide / inject API、$attrs/$listeners

https://juejin.im/post/5bd97e...
https://github.com/ljianshu/B...

Vue 的响应式原理中 Object.defineProperty 有什么缺陷？为什么在 Vue3.0 采用了 Proxy，抛弃了 Object.defineProperty？

Object.defineProperty无法监控到数组下标的变化，导致通过数组下标添加元素，不能实时响应；

Object.defineProperty只能劫持对象的属性，从而需要对每个对象，每个属性进行遍历，如果，属性值是对象，还需要深度遍历。Proxy可以劫持整个对象，并返回一个新的对象。

Proxy不仅可以代理对象，还可以代理数组。还可以代理动态增加的属性