这里给大家分享我在网上总结出来的一些知识,希望对大家有所帮助

vm.$forceUpdate

(1)作用

迫使Vue.js实例重新渲染。注意它仅仅影响实例本身以及插入插槽内容的子组件,而不是所有子组件。

(2)实现

只需要执行watcher的update方法,就可以让实例重新渲染。

Vue.js的每一个实例都有一个watcher。当状态发生改变时,会通知到组件级别,然后组件内部使用虚拟DOM进行更详细的重新渲染操作。

事实上,组件就是Vue.js实例,所以组件几倍的watcher和Vue.js实例上的watcher说的是同一个watcher。

手动执行实例watcher的update方法,就可以使Vue.js实例重新渲染。

Vue.prototype.$forceUpdate = function(){
const vm = this;
if(vm._watcher){
vm._watcher.update();
}
}

vm._watcher就是Vue.js实例的watcher,每当组件内依赖的数据发生变化时,都会自动触发Vue.js实例中_watcher的update方法。

重新渲染的实现原理并不难,Vue.js的自动渲染通过变化侦测来侦测数据,即当数据发生变化时,Vue.js实例重新渲染。而vm.$forceUpdate是手动通知Vue.js实例重新渲染。

vm.$destroy

(1)作用

完全销毁一个实例,它会清理该实例与其他实例的连接,并解绑其全部指令及监听器,同时会触发beforeDestory和destroyed的钩子函数。

(2)这个方法并不是很常用,大部分场景下并不需要销毁组件,只需要使用v-if或则v-for等指令以数据驱动的方式控制子组件的生命周期即可。

(3)实现原理

Vue.prototype.$destory = function(){
const vm = this;
if(vm._isBeingDestroyed){
return;
}
callHook(vm,"beforeDestroy");
vm._isBeingDestroyed = = true;
}

1、为了防止vm.$destroy被反复执行,先对属性_isBeingDestroyed进行判断,如果它为true,说明Vue.js实例正在被销毁,直接使用return语句退出函数执行逻辑。因为销毁只需要销毁一次即可,不需要反复销毁。

2、然后调用callHook函数触发beforeDestroy的钩子函数(callHook会触发参数中提供的钩子函数)。

(4)销毁实例的逻辑1 首先,需要清理当前组件与父组件之间的连接。组件就是Vue.js实例,所以要清理当前组件与父组件之间的连接,只需要将当前组件实例从父组件实例的$children属性中删除即可。

说明:Vue.js实例的$children属性存储了所有子组件

const parent = vm.$parent;
if(parent && !parent._isBeingDestroyed && !vm.$options.abstract){
remove(parent.$children,vm)
}

1、如果当前实例有父级,同时父级没有被销毁且不是抽象组件,那么将自己从父级的子列表中删除,也就是将自己的实例从父级的$children属性中删除。

2、事实上,子组件在不同父组件中是不同的Vue.js实例,所以一个子组件实例的父级只有一个,销毁操作也只需要从父级的子组件列表中销毁当前这个Vue.js实例。

export function remove(arr,item){
if(arr.length){
const index = arr.indexOf(item);
if(index>-1){
return arr.splice(index,1);
}
}
}

(5)销毁实例的逻辑2

1、父子组件间的链接断掉之后,需要销毁实例上的所有watcher,也就是说需要将实例上所有的依赖追踪断掉。

2、状态会收集一些依赖,当状态发生改变时会向这些依赖发送通知,而被收集的依赖就是watcher实例。因此,当Vue.js实例被销毁时,应该将实例所监听的状态都取消掉,也就是从状态的依赖列表中将watcher移除。

3、watcher的teardown方法,它的作用是从所有依赖项的Dep列表中将自己移除。即只要执行这个方法,就可以断掉这个watcher所监听的所有状态。

4、断掉Vue.js实例自身的watcher实例监听的所有状态。

if(vm._watcher){
vm._watcher.teardown();
}

5、执行了组件自身的watcher实例的teardown方法,从所有依赖项的订阅列表中删除watcher实例。删除之后,当状态发生变化时,watcher实例就不会再得到通知。

6、vm._watcher来源

当执行new Vue()时,会执行一系列初始化操作并渲染组件到实体上,其中就包括vm._watcher的处理

7、从Vue.js2.0开始,变化侦测的粒度调整为中等粒度,它只会发送通知到组件级别,然后组件使用虚拟DOM进行重新渲染。组件其实就是Vue.js实例。

8、怎么通知到组件级别

在Vue.js实例上,有一个watcher,也就是vm._watcher,它会监听这个组件中用到的所有状态,即这个组件内用到的所有状态的依赖列表中都会收集到vm._watcher。当这些状态发生变化时,也都会通知vm._watcher,然后这个watcher再调用虚拟DOM进行重新渲染。

(6)销毁实例的逻辑

1、只从状态的依赖列表中删除Vue.js实例上的watcher实例是不够的。Vue.js提供了vm.watch所创建的watcher实例。

2、从状态的依赖列表中销毁用户创建的watcher实例和销毁Vue实例上的watcher实例相同,只需要执行watcher的teardown方法。

3、问题:如何知道用户创建了多少个watcher?

1)Vue.js的解决方案是执行new Vue()时,在初始化的流程中,在this上添加一个_watchers属性

vm._watchers = [];

2)每当创建watcher实例时,都会将watcher实例添加到vm._watchers中

export default class Watcher{
constructor(vm,expOrFn,cb){
<!-- 每当创建watcher实例时,都将watcher实例添加到vm._watchers中 -->
vm._watchers.push(this);
}
}

4、只需要遍历vm._watchers并依次执行每一项watcher实例的teardown方法,就可以将watcher实例从它所监听的状态的依赖列表中移除。

let i = vm._watchers.length;
while(i--){
vm._watchers[i].teardown();
}

(7)向Vue.js实例添加_isDestroyed属性来表示Vue.js实例已经被销毁。

vm._isDestroyed = true;

(8)当vm.$destroy执行时,Vue.js不会将已经渲染到页面中的DOM节点移除,但会将模板中的所有指令解绑。

vm._patch_(vm._vnode,null)

(9)触发destroyed钩子函数

callHook(vm,'destroyed')

(10)最后,移除实例上的所有事件监听器。

vm.$off()

(11)完整代码

Vue.prototype.$destory = function(){
const vm = this;
<!-- 防止重复销毁 -->
if(vm._isBeingDestroyed){
return;
}
<!-- 调用钩子函数beforeDestroy -->
callHook(vm,"beforeDestroy");
vm._isBeingDestroyed = = true;
<!-- 删除自己与父级之间的连接 -->
const parent = vm.$parent;
if(parent && !parent._isBeingDestroyed && !vm.$options.abstract){
remove(parent.$children,vm);
}
<!-- 从watcher监听的所有状态的依赖列表中移除watcher -->
if(vm._watcher){
vm._watcher.teardown();
}
let i = vm._watchers.length;
<!-- 将从vm.$watcher创建的watcher实例从它所监听的状态的依赖列表中移除 -->
while(i--){
vm._watchers[i].teardown();
}
<!-- 表示实例已经被销毁 -->
vm._isDestroyed = true;
<!-- 将模板中的所有指令解绑 -->
vm._patch_(vm._vnode,null)
<!-- 触发destroyed钩子函数 -->
callHook(vm,'destroyed')
<!-- 移除实例上的所有事件监听器 -->
vm.$off();
}

本文转载于:

https://juejin.cn/post/6844904196840357902

如果对您有所帮助,欢迎您点个关注,我会定时更新技术文档,大家一起讨论学习,一起进步。

记录--手写$forceUpdate,vm.$destroy方法的更多相关文章

  1. JavaScript数组方法总结及手写

    目录 手写数组衍生方法 1.检测是否为数组 2.类数组转化为数组 3.数组扁平化 4.数组去重 5.数组使用Math.max 手写数组内置方法 1. Array.prototype.filter 2. ...

  2. laravel中delete()方法和destroy()方法的区别

    delete()方法是实例方法,需要查询到相应的数据并通过模型实例调用 destroy()方法可以直接调用,通过索引删除记录 举个栗子: /*delete()方法删除*/ //先查找记录 $blog ...

  3. 06_init()和destroy()方法

    [工程截图] [HelloWorld.java] package com.HigginCui; public class HelloWorld { public HelloWorld(){ Syste ...

  4. JavaEE开发之Spring中Bean的作用域、Init和Destroy方法以及Spring-EL表达式

    上篇博客我们聊了<JavaEE开发之Spring中的依赖注入以及AOP>,本篇博客我们就来聊一下Spring框架中的Bean的作用域以及Bean的Init和Destroy方法,然后在聊一下 ...

  5. PHP获取MySql新增记录ID值的3种方法

    From: http://www.jb51.net/article/51473.htm 这篇文章主要介绍了PHP获取MySql新增记录ID值的3种方法,一般使用PHP自带函数mysql_insert_ ...

  6. map集合修改其中元素 去除Map集合中所有具有相同值的元素 Properties长久保存的流操作 两种用map记录单词或字母个数的方法

    package com.swift.lianxi; import java.util.HashMap; import java.util.Iterator; import java.util.Map; ...

  7. ServletContext结合Servlet接口中的init()方法和destroy()方法的运用----网站计数器

    我们一般知道Servlet接口中的init()方法在tomcat启动时调用,destroy()方法在tomcat关闭时调用.那么这两个方法到底在实际开发中有什么作用呢?这就是这个随笔主要讲的内容. 思 ...

  8. Qt开发的应用记录读取用户习惯设置的方法

    Qt开发的应用记录读取用户习惯设置的方法 版权声明:本文为博主原创文章,遵循CC 4.0 BY-SA版权协议,转载请附上原文出处链接和本声明. 本文链接:https://blog.csdn.net/w ...

  9. mysql中RAND()随便查询记录效率问题和解决的方法分享

    在我们做开发的中效率一直是个问题,特别是对于非常多大数据量操作,今天我们碰到一个要随机查询数据,一開始我们可能想到最简单的order by rand() 来操作但效率不敢恭维啊 近期因为须要大概研究了 ...

  10. 记录手机端h5页面碰到的一些问题

    关于input光标在手机端偏移 问题根本:不要使用line-height垂直居中. 解决方法:可直接定义height,然后高度由上下padding值撑开. 移动端清除input光标 ios input ...

随机推荐

  1. Python 爬虫方法总结

    实现爬虫的套路 准备URL 准备start_url url地址规律不明显,总数不确定 通过代码提取下一页的url 通过xpath提取 寻找url地址,部分参数在当前的响应中(比如当前页码数和总页码数在 ...

  2. JS leetcode 杨辉三角 超详细题解分析

    壹 ❀ 引 刷leetcode的第四天,原题出处为杨辉三角,题目描述如下: 给定一个非负整数 numRows,生成杨辉三角的前 numRows 行. 在杨辉三角中,每个数是它左上方和右上方的数的和. ...

  3. MQTT-基础理念

    MQTT与HTTP的区别 HTTP协议是客户端与服务端直连请求与响应 MQTT是基于发布订阅模型的轻量级的消息传输协议 MQTT能力 发布:Publish 订阅:Subscribe 代理:Broker ...

  4. 【Unity3D】UGUI之Slider

    1 Slider属性面板 ​ 在 Hierarchy 窗口右键,选择 UI 列表里的 Slider 控件,即可创建 Slider 控件,选中创建的 Slider 控件,按键盘[T]键,可以调整 Sli ...

  5. Swoole从入门到入土(2)——TCP服务器[初步接触]

    我们知道Swoole弥补了PHP没办法实现长连接的短板,在接下来的话题中,我们会从TCP服务器.HTTP服务器.WebSocket服务器.协程.管道.中间件等话题,一个个进行讨论. 1.开篇 我们以S ...

  6. AppBox快速开发框架(开源)开发流程介绍

    pre { overflow-y: auto; max-height: 300px }   目前很多低代码平台都是基于Web用拖拽方式生成界面,确实可以极大的提高开发效率,但也存在一些问题: 大部分平 ...

  7. win32 - 控制台聊天

    仅适用于同一台电脑的两个进程聊天,对于不同电脑之前的聊天需要依靠tcp/ip协议. 两个进程是通过发送WM_COPYDATA 消息来传输字节的. 代码如下: Server.cpp #include & ...

  8. vue实现导出word文档(含多张图片)

    vue实现导出word文档(含多张图片) 转自: https://www.pudn.com/news/62e1e14e55398e076bea2d2f.html

  9. 【Azure 存储服务】Azure Storage Account 下的 Table 查询的性能调优

    问题描述 Azure Storage Account 下的 Table 查询的性能调优? 问题解答 因为Azure Storage Table服务(表服务) 与常规的关系型数据库不一样(例如:MySQ ...

  10. STL-string模拟实现

    1 #pragma once 2 3 #include<iostream> 4 #include<string.h> 5 #include<assert.h> 6 ...