vue动态组件(vue动态组件强制刷新)

15《Vue 入门教程》Vue 动态组件 & keep-alive

本小节我们将介绍 Vue 的动态组件，以及缓存 keep-alive 的使用。包括动态组件的使用方法，以及如何使用 keep-alive 实现组件的缓存效果。

vue动态组件(vue动态组件强制刷新)

动态组件是让多个组件使用同一个挂载点，并动态切换。动态组件是 Vue 的一个高级用法，但其实它的使用非常简单。keep-alive 是 vue 的内置组件，能在组件切换过程中将状态保存在内存中，防止重复渲染 DOM。

通过使用保留的 元素，动态地把组件名称绑定到它的 is 特性，可以实现动态组件：

实例演示

"运行案例" 可查看在线运行效果

代码解释： HTML 代码第 2 行，我们使用动态组件 component，将当前需要展示的组件名通过变量 currentView 绑定到 component 的 is 属性上。 HTML 代码第 3-5 行，我们定义了三个按钮，通过点击按钮切换 currentView 的值。 JS 代码第 3-11 行，我们定义了组件 ComponentA、ComponentB、ComponentC。

终的实现效果是：当点击按钮的时候会动态切换展示的组件。

keep-alive 是 Vue 提供的一个抽象组件，用来对组件进行缓存，从而节省性能，由于是一个抽象组件，所以在页面渲染完毕后不会被渲染成一个 DOM 元素。被 keep-alive 缓存的组件只有在初次渲染时才会被创建，并且当组件切换时不会被销毁。

keep-alive 的用法相对简单，直接使用 keep-alive 包裹需要缓存的组件即可：

实例演示

"运行案例" 可查看在线运行效果

代码解释： HTML 代码第 2-3 行，我们使用 keep-alive 包裹动态组件 component，将当前需要展示的组件名通过变量 currentView 绑定到 component 的 is 属性上。 HTML 代码第 5-7 行，我们定义了三个按钮，通过点击按钮切换 currentView 的值。 JS 代码第 3-29 行，我们定义了组件 ComponentA、ComponentB、ComponentC，分别定义了他们的 created 和 beforeDestroy 事件。

之前我们介绍过， keep-alive 缓存的组件只有在初次渲染时才会被创建。所以，我们通过修改 currentView 切换组件时，组件的 beforeDestroy 事件不会触发。若该组件是次渲染，会触发 created 事件，当再次切换显示该组件时，created 事件不会再次触发。

activated 和 deactivated 和我们之前学习的生命周期函数一样，也是组件的生命周期函数。不过， activated 和 deactivated 只在 内的所有嵌套组件中触发。 activated ：进入组件时触发。 deactivated ：退出组件时触发。

示例代码：

实例演示

"运行案例" 可查看在线运行效果

代码解释： JS 代码中，我们定义了组件 ComponentA、ComponentB，并分别定义了他们的 activated 和 deactivated 事件函数。 HTML 代码第 2-3 行，我们使用 keep-alive 包裹动态组件 component，将当前需要展示的组件名通过变量 currentView 绑定到 component 的 is 属性上。 HTML 代码第 5-6 行，我们定义了两个按钮，通过点击按钮切换 currentView 的值。当我们切换组件显示时，可以看到这样的打印信息：

include 和 exclude 是 keep-alive 的两个属性，允许组件有条件地缓存。 include： 可以是字符串或正则表达式，用来表示只有名称匹配的组件会被缓存。 exclude： 可以是字符串或正则表达式，用来表示名称匹配的组件不会被缓存。

示例：

实例演示

"运行案例" 可查看在线运行效果

代码解释： HTML 代码第 2-4 行，我们使用 keep-alive 包裹动态组件 component。给 keep-alive 指定需要缓存组件 ComponentA，ComponentB。 在之前的小节我们了解到 keep-alive 缓存的组件只有在初次渲染时才会被创建。所以，在案例中，组件 ComponentA 和 ComponentB 的 created 函数只有在次组件被创建的时候才会触发，而 ComponentC 的 created 函数当每次组件显示的时候都会触发。

exclude 示例：

实例演示

"运行案例" 可查看在线运行效果

代码解释： HTML 代码第 2-4 行，我们使用 keep-alive 包裹动态组件 component。给 keep-alive 指定不需要缓存组件 ComponentA，ComponentB。

本节，我们带大家学习了动态组件和缓存组件在项目中的运用。主要知识点有以下几点：

在vue中如何实现单一组件下动态修改数据时的全部重渲染

下面我就为大家分享一篇浅谈vue单一组件下动态修改数据时的全部重渲染，具有很好的参考价值，希望对大家有所帮助。

今天在学习vue的过程中，发现一个有趣的现象。

在某一组件下的某一数据通过点击事件被动态修改的时候，对应view中的数据同步的进行了修改，没错，这不是废话吗，vue的一大特色就是数据的双向绑定。可有趣的是，该组件下我写的另一个用Math.random()的data值对应的值和视图也发生了变化

这就让我这个刚入门的小白有点奇怪了，我修改一个，怎么变了两个？？？？脑洞放开一想，会不会数据在双向同步的时候，发生了什么，比如。是不是只要有一个节点变了，node都重新进行了加载？？？

我想这其中的缘由必定和vue数据的双向绑定的原理有关联，就搜索了一番，果然发现了些东西，就是DocumentFragment，之前好像见过，但没怎么重视。那么它是用来干啥的呢:

DocumentFragment（文档片段）可以看作节点容器，它可以包含多个子节点，当我们将它插入到 DOM 中时，只有它的子节点会插入目标节点，所以把它看作一组节点的容器。使用 DocumentFragment 处理节点，速度和性能远远优于直接作 DOM。

手动划重点：Vue 进行编译时，就是将挂载目标的所有子节点劫持（真的是劫持，通过 append 方法，DOM 中的节点会被自动删除）到 DocumentFragment 中，经过一番处理后，再将 DocumentFragment 整体返回插入挂载目标。

上面是我整理给大家的，希望今后会对大家有帮助。

相关文章：

JQuery选中select组件被选中的值方法

vue.js中$set与数组更新方法_vue.js

在react-router4中进行代码拆分的方法（基于webpack）

Vue如何使用动态刷新Echarts组件

这次给大家带来Vue如何使用动态刷新Echarts组件，Vue使用动态刷新Echarts组件的注意事项有哪些，下面就是实战案例，一起来看一下。

需求背景：dashboard作为目前企业中后台产品的“门面”，如何更加实时、高效、炫酷的对统计数据进行展示，是值得前端开发工程师和UI设计师共同思考的一个问题。今天就从0开始，封装一个动态渲染数据的Echarts折线图组件，抛砖引玉，一起来思考更多有意思的组件。

准备工作

项目结构搭建

因为生产需要（其实是懒），所以本教程使用了 ==vue-cli==进行了项目的基础结构搭建。

npm install -g vue-cli

vue init webpack vue-charts

cd vue-charts

npm run dev安装Echarts

直接使用npm进行安装。

npm install Echarts --se引入Echarts

//在main.js加入下面两行代码

import echarts from 'echarts'

Vue.prototype.$echarts = echarts //将echarts注册成Vue的全局属性到此，准备工作已经完成了。

静态组件开发

因为被《React编程思想》这篇文章毒害太深，所以笔者开发组件也习惯从基础到高级逐步迭代。

静态组件要实现的目的很简单，就是把Echarts图表，渲染到页面上。

新建Chart.vue文件

上述文件就实现了将一个简单折线图渲染到页面的组件，怎么样是不是很简单？简使用方法如下：

App.vue

至此，运行程序你应该能看到以下效果：

次迭代

现在我们已经有了一个基础版本，让我们来看看哪些方面做的还不尽如人意：

图表无法根据窗口大小进行自动缩放，虽然设置了宽度为，但是只有刷新页面图表才会重新进行渲染，这会让用户体验变得。

图表目前无法实现数据自动刷新

下面我们来实现这两点：

自动缩放

Echarts本身是不支持自动缩放的，但是Echarts为我们提供了resize方法。

//在init方法中加入下面这行代码

window.addEventListener("resize", this.chart.resize);只需要这一句，我们就实现了图表跟随窗口大小自适应的需求。

支持数据自动刷新

因为Echarts是数据驱动的，这意味着只要我们重新设置数据，那么图表就会随之重新渲染，这是实现本需求的基础。我们再设想一下，如果想要支持数据的自动刷新，必然需要一个能够实时监听到数据的变化然后告知Echarts重新设置数据。所幸Vue为我们提供了==watcher==功能，通过它我们可以很方便的实现上述功能：

//在Chart.vue中加入watch

watch: {

//观察option的变化

option: {

handler(newVal, oldVal) {

if (this.chart) {

if (newVal) {

this.chart.setOption(newVal);

} else {

this.chart.setOption(oldVal);

}} else {

this.init();

}},

deep: true //对象内部属性的监听，关键。

}}上面代码就实现了我们对option对象中属性变化的监听，一旦option中的数据有了变化，那么图表就会重新渲染。

实现动态刷新

下一步我想大家都知道了，就是定时从后台拉取数据，然后更新父组件的option就好。这个地方有两个问题需要思考一下：

如果图表要求每秒增加一个数据，应该如何进行数据的请求才能达到性能与用户体验的平衡？

动态更新数据的代码，应该放在父组件还是子组件？

对个问题，每秒实时获取服务器的数据，肯定是的，这就有两种方案：

每秒向后台请求一次

保持长连接，后台每秒向前端推送一次数据

种方案无疑对性能和资源产生了极大的浪费；除非实时性要求特别高（股票系统），否则不这种方式；

第二种方案需要使用web Socket，但在服务端需要进行额外的开发工作。

笔者基于项目的实际需求（实时性要求不高，且后台生成数据也有一定的延迟性），采用了以下方案：

前端每隔一分钟向后台请求一次数据，且为当前时间的上一分钟的数据；

前端将上述数据每隔一秒向图表set一次数据

关于第二个问题：笔者更倾向于将Chart组件设计成纯组件，即只接收父组件传递的数据进行变化，不在内部进行复杂作；这也符合目前前端MVVM框架的实践；而且若将数据传递到Chart组件内部再进行处理，一是遇到不需要动态渲染的需求还需要对组件进行额外处理，二是要在Chart内部做ajax作，这样就导致Chart完全没有了可复用性。

接下来我们修改App.vue

至此我们就实现了图表动态数据加载，效果如下图：

总结

这篇教程通过一个动态图表的开发，传递了以下信息：

Echarts如何与Vue结合使用

Vue组件开发、纯组件与“脏”组件的区别

Vue watch的用法

let的特性

JaScript EventLoop特性

大家可以根据这个列表查漏补缺。

后续优化

这个组件还有需要需要优化的点，比如：

间隔时间应该可配置

每分钟从后台获取数据，那么图表展示的数据将会越来越多，越来越密集，浏览器负担越来越大，直到崩溃

没有设置暂停图表刷新的按钮

相信看了本文案例你已经掌握了方法，更多精彩请关注Gxl网其它相关文章！

阅读：

JS怎么储存原始值与引用值

Angular Component实用技巧详解

怎样利用Vue自定义动态组件

这次给大家带来怎样利用Vue自定义动态组件，利用Vue自定义动态组件的注意事项有哪些，下面就是实战案例，一起来看一下。

现在基于vue的UI组件库有很多，比如iview，element-ui等。但有时候这些组件库满足不了我们的开发需求，这时候我们就需要自己写一个插件。

举个栗子

用vue-cli搭建好项目目录之后，在src/components下面新建一个文件夹放我们要写的插件，如图所示:

index.vue里写我们的组件，代码如下：

index.js里面写index.vue的install方法，并用注册组件，代码如下：

接下来我们要在默认的main.js里将刚刚写的index.js文件导入，并通过Vue.use来使用它，代码如下：

大功告成，接下来在app.vue里直接使用就可以啦，可以看到页面已经显示相应的组件了，如图：

这时候我们还可以自定义click事件，并通过参数的方式传递给我们的插件，插件可以通过props属性获取到该事件，如图：

可以看到页面已经生效了： [definition])用于注册或获取组件。

Vue.use(plugin)用于安装 Vue.js 插件。如果插件是一个对象，必须提供 install 方法。如果插件是一个函数，它会被作为 install 方法。install 方法调用时，会将 Vue 作为参数传入。当 install 方法被同一个插件多次调用，插件将只会被安装一次。

举第二个栗子

我们再建一个文件夹，如图：

我们要写一个组件，能够显示外部传进来的内容，并在3秒后自动消失，代码如下：

接下来我们要在index.js里使用构造器来创建它，如图：

依旧在默认的main.js里引用刚刚的js文件，并加入到Vue实例上，这样我们就可以直接通过this.$seconddemo()来调用了，代码如下：

import SecondDemo from './components/global/seconddemo/index'Vue.prototype.$seconddemo = SecondDemo在app.vue里使用它，发现插件加载成功了，如图：

Vue.extend(options)是 Vue 的构造器，用于创建一个“子类”。

统一管理自定义组件

当组件数量很多时，我们可以通过提供一个统一的出口文件来管理这些自定义组件，首先在global文件夹下新建一个index.js文件，代码如图：

index.js文件帮我们把所有自定义的组件都通过注册了，export一个包含install方法的对象给Vue.use()使用。

相信看了本文案例你已经掌握了方法，更多精彩请关注Gxl网其它相关文章！

阅读：

怎样做出JS中E-mail 地址格式验证

如何利用JS分时函数进行性能优化

Vue加载组件、动态加载组件的几种方式

什么是组件：

组件是Vue.js强大的功能之一。组件可以扩展HTML元素，封装可重用的代码。在较高层面上，组件是自定义的元素，Vue.js的编译器为它添加特殊功能。在有些情况下，组件也可以是原生HTML元素的形式，以is特性扩展。

下面一段简单的代码给大家介绍Vue加载组件的几种方式，具体代码如下所示：

//正常加载

import index from '../pages/index.vue'

import view from '../pages/view.vue'

//懒加载

const index = resolve => require(['../pages/index.vue'], resolve)

const view = resolve => require(['../pages/view.vue'], resolve)

//懒加载 - 按组

const index = r => require.ensure([], () => r(require('../pages/index.vue')), 'group-index')

const view = r => require.ensure([], () => r(require('../pages/view.vue')), 'group-view')

// 懒加载 - 按组 import，基于ES6 import的特性

const index = () => import('../pages/index.vue')

const view = () => import('../pages/view.vue')

补充：Vue动态加载组件的四种方式

动态加载组件的四种方式：

1、使用import导入组件，可以获取到组件

var name = 'system';

var myComponent =() => import('../components/' + name + '.vue');

var route={

name:name,

component:myComponent

}2、使用import导入组件，直接将组件赋值给componet

var name = 'system';

var route={

name:name,

component :() => import('../components/' + name + '.vue');

}3、使用require 导入组件，可以获取到组件

var name = 'system';

var myComponent = resolve => require.ensure([], () => resolve(require('../components/' + name + '.vue')));

var route={

name:name,

component:myComponent

}4、使用require 导入组件，直接将组件赋值给componet

var name = 'system';

var route={

name:name,

component(resolve) {

require(['../components/' + name + '.vue'], resolve)

}}

总结

以上所述是小编给大家介绍的Vue加载组件、动态加载组件的几种方式，希望对大家有所帮助，如果大家有任何疑问请给我留言，小编会及时回复大家的。在此也非常感谢大家对脚本之家网站的支持！动态组件和keep-alive缓存组件

比如我们现在想要实现了一个功能：

通过给内置组件component的 属性is 动态绑定不同的值，值为全局或局部注册的 组件名称 ,来 渲染 不同的组件

如果需要给动态渲染的动态组件传递属性，和监听组件内部发射的事件，可以直接在component组件上传递属性和监听事件

home.vue

例如，home.vue在被渲染的时候，需要给其传递name,age属性，并且监听其内部发出的pageClick事件

App.vue

我们先对之前的案例中About组件进行改造：

About.vue

在其中增加了一个按钮，点击可以递增的功能；

keep-alive有一些属性：

App.vue

对于缓存的组件来说，离开和再次进入组件时，组件是不会被销毁的，

但是有时候我们确实希望监听到何时重新进入到了组件，何时离开了组件；

如何实现vue动态绑定组件子父组件多表单验证

这次给大家带来如何实现vue动态绑定组件子父组件多表单验证，实现vue动态绑定组件子父组件多表单验证的注意事项有哪些，下面就是实战案例，一起来看一下。

前端项目中经常会下拉或者选项卡，如果通过if,else或者switch去判断加载的话会产生大量冗余代码和变量定义，而且都写在一起后人很难维护。

Vue核心在于组件，如果有内容通过选项卡或者下拉框切换用动态加载子组件不过。

如图： selects文件夹中，index只负责公共数据（当然公共数据也可以写在其他文件，只留一个入口文件），而comp文件夹中的几个组件则通过动态加载。

动态加载子组件：component

// 给下拉框绑定下拉列表的索引

v-for="item in options"

:key="item.value"

:label="item.label"

:value="item.value">

引入组件后放到一个数组内，通过控制对应的索引达到加载组件的目的

// 加载组件：每次下拉框监听则给changValue新赋值，如果下拉options的value从0开始则绑定组件时不用-1

子父组件表单一起验证：

按钮放在父组件内：

子组件：自定义验证规则

data(){

const num = (rule, value, callback) => {

let num = /^\d+$/

if(!value){

return callback(new Error('数量不能为空'))

}else if(!num.test(value)){

return callback(new Error('数量必须为数字'))

}else{

callback()

}}

const price = (rule, value, callback) => {

let num2 = /^\d+$/

if(!value){

return callback(new Error('单价不能为空'))

}else if(!num2.test(value)){

return callback(new Error('单价必须为数字'))

}else{

callback()

}}

return{

// 验证

apple:{

num: '',

price: '',

},

reg:{

num: [

{ validator: num, trigger: 'blur' }

],

price: [

{ validator: price, trigger: 'blur' }

]}

}// 验证

submitForm(){

this.$refs.apple.validate((valid) => {

if(valid){

this.$emit('isSubmit',["subject",true])

}else{

this.$emit('isSubmit',["subject",false])

return false

}})

}父组件：

// 获取子组件状态

getSubmit(type){

this.isRule = type[1]

},

// 公共数据验证

submitForm2(){

// 如果选中了子组件

if(this.changValue){

this.$refs.subjectChild.submitForm()

}let _this = this

let p1 = new Promise((resolve, reject) => {

_this.$refs.ruleForm.validate((valid) => {

if(valid){

resolve()

}})

})

if(_this.isRule){

Promise.all([p1]).then(() => {

console.log('正确')

})

.catch(() => {

console.log('错误')

})

}else{

console.log('错误')

}},相信看了本文案例你已经掌握了方法，更多精彩请关注Gxl网其它相关文章！

阅读：

如何使用js封装ajax功能函数与用法

JS中有哪些常用数学函数？