如何让一个Vue组件重新创建_如何让一个vue组件重新创建文件

作为虚拟币行业人士而言，我们经常都会说到如何让一个Vue组件重新创建时有很多细节是需要注意的。你知道如何让一个vue组件重新创建文件？今天就让小编跟你们说说吧！

怎么把vue组件销毁重建呢？

销毁是调用实例方法 $destroy()

比如

var vm = new Vue({

... // 这里代码就不写了。

});

vm.$destroy(); // 销毁上面new 的Vue实例。

销毁之后这个组件就不存在了，想要重建的话，但重新执行 mount 挂载。

Vue 并不建议反复地调用 $destroy(), 方法，如果你是想要实现显示隐藏元素的效果，应该使用 v-if 或者 v-show 指令。

Vue之重新渲染组件的正确方式

原文：

以下为翻译篇，如有不正确之处还望留言指正。

当你只想重新渲染某个组件，或者销毁当前DOM并重新开始， 这个时候Vue的响应系统就差点儿意思。那如果是你遇到类似情况的话，会怎么办呢？

最行之有效的办法就是给component设置一个:key，当你需要重新渲染这个组件的时候只需要修改key的值即可。

这难道不是一个相当简单的解决办法吗？

还有一些其他的方法可以实现相同的效果：

如果你想强制重新加载或者强制更新，下面会可能是比较好的方式。

很有可能你对相面的几件事情比较迷惑：

1、Vue的响应式

2、计算属性

3、监听器

4、v-for未使用:key

这里有几个强制刷新的可用Demo，大部分都可以通过key-changing方式解决，关于技术的原理在文章的末尾。

这是一种类似于“你每次想退出app时都要通过重启电脑”的方式。

我猜想这种方式有时也会很有效，但是确实是个比较糟糕的方式，这里就不必多言，不要这么干了，可以看看其他比较好的方式。

Vue的v-if指令只有当true时才会显示，false则会将其从DOM中剔除，接下来我们来看看怎么做的。

流程分析：

1、初始化的时候renderComponent值为true，组件渲染

2、当我们调用forceRerender时，renderComponent会立刻变为false，

3、这个时候因为值为false组件就会停止渲染，

4、然后在next tick里面将renderComponent的值重新设置回去，

5、现在组件就会开始重新渲染

上面的流程主要有两个重要的点需要理解：

1、必须要在nextTick以后才能更改，否则会看不到效果

在Vue中，DOM的更新周期即为一个tick，在同一个tick内Vue会搜集变化，然后在tick的最后会根据变化的值去更新节点，如果我们不等到next tick，直接更新变量的值，不会触发节点的更新。

2、当我们重新渲染的时候，Vue将会创建一个新的组件。Vue销毁之前的重新创建新的意味着新的组件会重新走一遍生命周期。

和前面的方式对比，这种也是官方支持的、比较好的方式。

正常来讲，Vue会根据依赖的值变化去更新界面，当然，如果你调用 forceUpdate ，就算依赖的值未变化也会强制更新。

这里有个问题： Vue既然能根据值的变化去自动更新，那为啥我们还需要强制更新呢？ 这个是因为有的时候Vue的响应系统会有困惑，我们认为Vue会根据某些属性或变量的值变化去更新，结果并没有，而且还有一些其他的情况是响应系统检测不到的。所以如果你有重新渲染组件的需要时这种方式比较好。

需要注意的是： forceUpdate 只会强制更新页面，不会更新现有的计算属性。

在很多种情况下你可能都会有重新渲染组件的需求，为了比较好的解决这种问题，我们将使用 key 属性以便Vue能够将数据和组件建立起关系。如果key不变，就不更新。一旦key发生变化，Vue就会剔除旧的创建新的组件。

使用之前我们先看一下为什么要使用 key !

当你明白了这个问题以后你对如果正确的重新渲染组件会有不小的进步。

假设您要呈现的组件列表具有以下一个或多个特点：

如果你对这个列表进行排序或者更新，你都需要重新渲染列表的部分界面，但是你不想将整个列表重新渲染，而仅仅是将修改的过的进行更新。

为了帮助Vue框架能够监测哪些值发生改变，哪些值未变，我们提供了 key 属性，因为在列表的特殊对象和其索引 index 没有进行绑定，

这儿有个例子：

如果你想通过索引渲染，可能会这么写：

如果我们删除 Sarah ，会得到如下结果：

虽然 James 仍然是 James ，但是和其关联的索引已经改变。 James 会被重新渲染，虽然我们不想那样。

所以在这里，我们想用某种独特的ID，但是我们最终生成它。

在我们将 Sarah 从列表中移除前，Vue为了另外两个先删除组件，然后再给 James 创建一个组件，现在Vue知道可以保留 Evan 和 James 组件，唯一需要做的就是删除 Sarah 的组件.

如果再加上一个人到列表中，它也知道它可以保持现有的所有组件，并且它只能建立一个新的组件，并将其插入正确的位置。这是非常有用的，并帮助了我们很多的时候，我们有更复杂的组件都有自己的状态，必须初始化逻辑，或做任何类型的DOM操作。

也许这弯路也没那么短。但是，有必要解释Vue是如何工作的很关键。

不管怎么说，让我们与强迫重新渲染的最佳方法！

Key-changing to force re-renders of a component

这里是做的一个非常基本的方法：

Vue.js 如何在组件中创建组件

Vue中很少在组件中创建，而是各个独立的组件，然后互相调用。再一个就是要多关注各个父子组件之间的数据绑定和关系。你可以用router-view或者component标签来用其他的componnet。强烈不建议在组件中创建新的组件，这样就违背了组件的复用和隔离型的优点了。

vue中如何不刷新页面让组件重新渲染？

vue使用key标记组件身份，当key改变时就是释放原始组件，重新加载新的组件。

组件内置$forceUpdate方法 , 强制手动刷新组件

己保存的vue怎么重新编缉

1 一般在vue中，有很多vue组件，这些组件每个都是一个文件。都可能需要引用到相同模块(或者插件)。我们不想每个文件都import 一次模块。

如果是基于vue.js编写的插件我们可以用 Vue.use(...)

main.js

2 但是如果想添加一个全局命令，同时又让每个vue的文件都能用到怎么办？

第一步：最好建立一个全局的命令文件例如：directive/directive.js

第二步：利用Vue.directive()建立一个全局命令，并将它暴露出来，例如一个focus 让表单自动聚焦

directive.js

第三部步：在main.js（入口JS文件）中将它引入，可以省略文件后缀

main.js

这样任何一个Vue文件只要这样v-focus(命令名)，就可以很方便的用到了

3 Vue.directive() 的命令一般都是自动运行的或者说初始化等等触发的，并不能用于异步事件，怎么办？

于是我们可以用到'mixins'混合命令，你最好建立一个专门的文件夹用于存放混合命令，例如：

mixins.js

比如 saveScrollPosition （不是vue中的saveScrollPosition）可以每次在路由跳转之间保存住浏览位置信息

注意：vue2.0 中 路由跳转之间会自动保存位置信息 但是有Bug（位置信息之间会相互干扰）。

所以我们从新写一个saveScrollPosition暴露出去后，在你需要的页面中混入

这样就会很方便。

4 如果你需要应用一个插件，同时他并不是基于vue.js的插件命令编写的，那你可以将它赋予Vue的原型上

例如：我想全局引用axios，我们可以这样

main.js

然后this.$http.get(url) 等等

xxx.vue

5 将需要的变量挂在到window对象上

例如：第三方库Lodash.js,moment.js等等

main.js

xxx.vue

注意：这种方式不适合服务端渲染，服务端并没有window对象

强调一点：以上所有的引入都必须通过入口JS文件去引入，这样才能适用于全局

vue 怎么创建组件及组件使用方法

使用vue.js构造modal组件的方法是使用 v-model 指令：

v-model 指令在表单控件元素上创建双向数据绑定。根据控件类型它自动选取正确的方法更新元素。

比如，多个勾选框，绑定到同一个数组：

input type="checkbox" id="jack" value="Jack" v-model="checkedNames"

label for="jack"Jack/label

input type="checkbox" id="john" value="John" v-model="checkedNames"

label for="john"John/label

input type="checkbox" id="mike" value="Mike" v-model="checkedNames"

label for="mike"Mike/label

br

spanChecked names: {{ checkedNames | json }}/span

new Vue({

el: '...',

data: {

checkedNames: []

}

})

相信经过帮企客小编对如何让一个Vue组件重新创建和如何让一个vue组件重新创建文件的介绍，你对如何让一个Vue组件重新创建了解更加地透彻了，感谢你对我们地支持与关注！