vue中的render（Vue中重新渲染组件的方法总结）

本文目录

• Vue中重新渲染组件的方法总结
• vue.extend、 new vue（）、component、render
• vue中虚拟dom什么时候进行渲染
• vue2.0中的render函数怎么实现双向数据绑定

Vue中重新渲染组件的方法总结

有时Vue的反应性系统还不够，您只需要重新渲染组件即可。
重新渲染组件有以下几个办法：

1.可怕的方法：重新加载整个页面
2.可怕的方法：使用v-if
3.更好的方法：使用Vue的内置forceUpdate方法
4.最好的方法：在组件上进行key更改

非常不建议这样做，我们来看下一个办法。

v-if指令，该指令仅在组件为true时才渲染。 如果为false，则该组件在DOM中不存在。
下面我们设置它以使其v-if能够正常工作的方式。

在您的template，您将添加v-if指令：

script您将添加使用以下方法nextTick：

这里发生的事情：
1.最初 renderComponent 设置为 true ，因此 my-component 组件渲染
2.在 forceRerender 中我们立即设置 renderComponent 为 false
3.停止渲染组件 my-component ，因为该 v-if 指令现在的值为 false
4.在 nextTick 中将 renderComponent 上设置回 true
5.现在该 v-if 结果为 true ，因此我们 my-component 再次开始渲染

我们必须等到 nextTick ，否则我们不会看到任何变化。

在Vue中，一个 nextTick 是一个DOM更新周期。Vue将收集在同一 nextTick 中进行的所有更新，在 nextTick 结束时，它将根据这些更新来渲染 DOM 中的内容。如果我们不等到 nextTick ，我们对 renderComponent 的更新就会自动取消，什么也不会改变。

其次，当我们第二次渲染时，Vue将创建一个全新的组件。 Vue 将销毁第一个，并创建一个新的，这意味着我们的新 my-component 将像正常情况一样经历其所有生命周期- created ， mounted 等。

这是解决此问题的两种最佳方法之一，此方法得到Vue的官方支持。

forceUpdate 在组件实例本身以及全局实例上，可以通过两种不同的方式调用：

重要提示 ：这不会更新您拥有的任何计算属性。调用 forceUpdate 只会 强制重新渲染视图

在许多情况下，我们需要重新渲染组件。

要正确地做到这一点，我们将提供一个key属性，以便 Vue 知道特定的组件与特定的数据片段相关联。如果key保持不变，则不会更改组件，但是如果key发生更改，Vue 就会知道应该删除旧组件并创建新组件。

我们可以采用这种将key分配给子组件的策略，但是每次想重新渲染组件时，只需更新该key即可。

每次 forceRerender 被调用时，我们的 componentKey 都会改变。当这种情况发生时，Vue将知道它必须销毁组件并创建一个新组件。我们得到的是一个子组件，它将重新初始化自身并“重置”其状态。

***隐藏网址***

vue.extend、 new vue（）、component、render

前言
vue菜鸟一枚，对vue.extend、 new vue()、component、render比较懵逼，理不清关系，用法，码行查看了一些博文后，这里记录一下自己一点浅显的理解。

1.vue.extend、 new vue()
vue.extend() 是new vue() 的一个子类。用法都一样，都是实例化一个对象，然后是挂载到到dom元素上。

注意：
（1）挂载到dom元素，其次vue.extend（）里面的的HTML模板 （template："《p》hello《/p》"） 会覆盖被挂载的那个dom元素。 new vue() 里面的 render 的模板迟档哗也会覆盖被挂载的那个dom元素。

（2）vue.extend（）中的蠢握data是一个函数且返回一个对象。

2.vue.component全局注册和局部注册components
通过component注册组件不会覆盖原有的dom元素，直接把标签放到相应元素内就可使用。

下面进行实例对比
1.component注册使用

2.new 实例().$mount() 被挂在的元素会被覆盖

3.new vue()挂载到组件， render渲染的组件会覆盖被挂在的dom元素

注意
1.vue.extend()完了需要操作new 实例().$mount() ，才能挂载。

2.图片中的两种挂载方法

延伸 ：vue.extend（）的传参propsData

参考：
***隐藏网址***
***隐藏网址***

vue中虚拟dom什么时候进行渲染

Vue实例有一个完整的生命周期，也就是从开始创建、初始化数据、编译模板、挂载Dom、渲染→更新→渲染、销毁等一系列过程，我们称这是Vue的生命周期。通俗说就是Vue实例从创建到销毁的过程，就是生命周期。
每一个组件或者实例都会经历一个完整的生命周期，总共分为三个阶段：初始化、运行中、销毁。
实例、组件通过new Vue() 创建出来之后会初始化事件和生命周期，然后就会执行beforeCreate钩子函数，这个时候，数据还没有挂载呢，只是一个空壳，无法访问到数据和真实的dom，一般不做操作
挂载数据，绑定事件等等，然后执行created函数，这个时候已经可以使用到数据，也可以更改数据,在这里更改数据不会触发updated函数，在这里可以在渲染前倒数第二次更改数据的机会，不会触发其他的钩子函数，一般可以在这里做初始数据的获取
接下来开始找实例或者组件对应的模板，编译模板为虚拟dom放入到render函数中准备渲染，然后执行beforeMount钩子函数，在这个函数中虚拟dom已经创建完成，马上就要渲染,在这里也可以更改数据，不会触发updated，在这里可以在渲染前最后一次更改数据的机会，不会触发其他的钩子函数，一般可以在这里做初始数据的获取
接下来开始render，渲染出真实dom，然后执行mounted钩子函数，此时，组件已经出现在页面中，数据、真实dom都已经处理好了,事件都已经挂载好了，可以在这里操作真实dom等事情...
当组件或实例的数据更改之后，会立即执行beforeUpdate，然后vue的虚拟dom机制会重新构建虚拟dom与上一次的虚拟dom树利用diff算法进行对比之后重新渲染，一般不做什么事儿
当更新完成后，执行updated，数据已经更改完成，dom也重新render完成，可以操作更新后的虚拟dom
当经过某种途径调用$destroy方法后，立即执行beforeDestroy，一般在这里做一些善后工作，例如清除计时器、清除非指令绑定的事件等等
组件的数据绑定、监听...去掉后只剩下dom空壳，这个时候，执行destroyed，在这里做善后工作也可以。

vue2.0中的render函数怎么实现双向数据绑定

一，先创建一个叫eventbus的vue对象，什么配置都不需要，就只是拿来做一个event bus而已。第二，因为组件的props不允许更改，所以呢要用另一个变量来作为中转，也就是呢，组件不能用functional为true了。然后组件里头定义了个currentValue，绑定在props定义的value，这样：data: function() { return { currentValue: this.value }}第三，组件里头添加watch属性，监听value和currentValue的变化，这样：watch: { value: function(newValue, oldValue) { this.currentValue = newValue; //这里有点诡异，最后说document.getElementById(inputId).value=this.currentValue; }, currentValue: function(newValue){ eventbus.$emit(’model-change’, this.modelName, newValue); }}这里，还需要在props里头加一个modelName的字段给组件标签绑定，后面有用呢。。第四，在input标签里头要绑个input的事件，这样：var that = this;createElement(’input’, { //... ’on’: { ’input’: function(event){ that.currentValue = event.target.value; } }})第五，绑定这个标签的Vue对象里头，要加个created的钩子，绑个model-change的事件，这样：created: function() { var that = this; eventbus.$on(’model-change’, function(modelName, modelValue) { Vue.set(that.$data, modelName, modelValue); });}最终，标签变成了这样：《my-component :value="user.name" model-name="user.name"》《/my-component》user.name的默认值是Mary，渲染出来的时候也是显示Mary，敲键盘改值改成xxx，控制台里头看一下，user.name也变成了xxx了，在控制台里头将user.name改成abc，框里头也变成abc了。终于可以双向绑定了。