vue值改变但页面不渲染,vue中数组发生改变,页面没有渲染

　　本文主要介绍vuex遇到的坑。vuex的数据发生变化，组件中的页面不呈现。有很好的参考价值，希望对你有帮助。来和边肖一起看看吧。

　　vuex数据改变，组件中页面不渲染

　　相信许多vuex新手都会遇到这样的问题：

　　vuex数据更新后，数据在插件中的使用位置不会更新。

　　这样的代码

　　data() {

　　返回{

　　tableData:这个。$store.state.AdminInfo

　　};

　　}

　　然后在模板中使用tableData。

　　El-table:data= table data class= tablePst

　　El-table-column label=登录名 prop=登录名/El-table-column

　　El-table-column label=真实名称 prop=真实名称/El-table-column

　　/el-table

　　在这种情况下，会出现数据变化不渲染的问题。

　　问题

　　要解决问题，你得了解vue的生命周期。tableData在页面加载之前获取存储区中的值，并将其赋给自身，因此tableData只有一个初始值。如果稍后vuex中的状态发生变化，它将不会被再次分配给tableData。除非页面被刷新并重新加载，并且组件生命周期再次开始，否则您可以获得最新的值。

　　解决

　　1.在组件中去掉tableData的状态，直接在模板中使用$store.state.AdminInfo，这样就可以随时获取最新的状态值。

　　El-table:data= $ store . state . admininfo class= tablePst

　　El-table-column label=登录名 prop=登录名/El-table-column

　　El-table-column label=真实名称 prop=真实名称/El-table-column

　　/el-table

　　2.使用mapState向组件公开vuex中的状态，然后使用它。详见vuex mapState官方文档。

　　补充知识：解决vue修改数据页面不重新渲染问题(Vue中数组和对象更改后视图不刷新)

　　Vue渲染机制及解决数据修改页面不刷新的几种方法。

　　本文不讲原则，只讲干货。(我觉得我能学到知识，所以请给边肖一个赞！)

　　首先，vue的底层是通过使用Object.definePropety将数据对象传递给getter和setter，所以vue不支持IE8。

　　1.简要介绍对象。定义属性，

　　Object.defineProperty(对象，属性，描述符)

　　//参数

　　目标文件

　　要在其上定义属性的对象。

　　支柱

　　要定义或修改的属性的名称。

　　描述符

　　要定义或修改的属性描述符

　　var obj={}

　　Object.defineProperty(obj， name ，{

　　get: function() {

　　Console.log(我的名字是名字)；

　　返回名称；

　　},

　　集合：函数(值){

　　Console.log(“您的姓名”值)

　　名称=值；

　　}

　　});

　　Obj.name=张三；//你叫张三

　　我叫张三，在obj.name//.

　　从上面我们可以简单的发现。当我们给这个对象的name属性赋值时，我们会触发set方法，当我们得到name属性时，我们会触发get方法。

　　2.所以vue中数据写的属性可以转换成getter和setter，换句话说就是响应式的。在数据之外定义的其他数据呈现为无响应，这意味着在更改数据后不会刷新页面，因此页面上要呈现的所有数据都必须写入数据中。

　　不需要的可以在此定义，

　　var vm=new Vue({

　　数据：{

　　答：1

　　}

　　})

　　//`VM.a `有反应。

　　vm.b=2

　　// VM . b 没有响应。

　　3.简单介绍完之后，再来列举几个不刷新的例子。当然，以上也是一种

　　第一种：修改对象的某一属性

　　Vue只会把数据中已经声明的属性改成响应，没有声明的不会响应。

　　模板

　　差异

　　列表“{item}}/div中的div v-for=”项

　　按钮@click=click 更改/按钮

　　Button @click=hadelClick 解决方案/button

　　/div

　　/模板

　　脚本

　　导出默认值({

　　data(){

　　返回{

　　列表：{a:a ，b:b}，

　　}

　　},

　　方法：{

　　单击(){

　　//未声明不触发呈现

　　this.list.c=c

　　},

　　hadelClick(){

　　//解决方法，使用vue提供的$set方法触发渲染

　　这个。$set(this.list， d ， d )

　　}

　　}

　　})

　　/脚本

　　当然，如果我们想要添加多个属性，我们可以使用Object.assign()将所有可枚举属性的值从一个或多个源对象复制到目标对象，并返回给目标对象。(简单来说就是合并到第一个参数中)

　　this.list=Object.assign({}，this.list，{c:c ，d:d})

　　第二种：修改数组对象的某一属性

　　模板

　　差异

　　列表“{item.a}}/div中的div v-for=”项

　　按钮@click=click 更改/按钮

　　Button @click=hadelClick 解决方案/button

　　/div

　　/模板

　　脚本

　　导出默认值({

　　data(){

　　返回{

　　列表：[{a:vue}，{a:react}，{a:js}]，

　　}

　　},

　　方法：{

　　单击(){

　　//如果要像这样直接给数组中的对象赋值，就不能动态呈现(即数据改变，页面不呈现)

　　This.list[0]={a:css} //不呈现页面

　　console . log(this . list)//[{ a: CSS }，{a:react}，{a:js}]

　　},

　　hadelClick(){

　　//解决方法，使用vue提供的$set方法触发渲染

　　这个。$set(this.list[1]， a ， css )

　　console . log(this . list)//[{a:css}，{ a: CSS }，{a:js}]

　　}

　　}

　　})

　　/脚本

　　当然，如前所述，vue会遍历data中的数据，将对象转换成setter和getter。所以数组中的也不例外，所以上面的操作

　　更改为：

　　单击(){

　　This.list[0]。a=css //仍然可以触发setter。实现数据重渲染。

　　}

　　}

　　在vue中更多的是数组的操作不刷新，一个是通过索引赋值，一个是修改数组的长度。如何解决这个问题？

　　vue官方也给了方法

　　数组的API，可以改变原来的数组可以触发更新；

　　1、推送()

　　2、流行()

　　3、移位()

　　4、未换档()

　　5、拼接()

　　6、排序()

　　7、反转()

　　第二种是返回一个新的数组，这个数组从根本上改变了它的引用地址，这样的赋值可以触发更新(这是处理不刷新的思路，即改变引用地址重新赋值可以触发更新)。

　　简单来说，API with array就是直接用原来的数组接收改变后的数组，

　　模板

　　差异

　　列表“{item.a}}/div中的div v-for=”项

　　Button @click=click 更改原始数组/按钮

　　Button @click=hadelClick 不会更改原始数组/按钮

　　/div

　　/模板

　　脚本

　　导出默认值({

　　data(){

　　返回{

　　列表：[{a:vue}，{a:react}，{a:js}]，

　　}

　　},

　　方法：{

　　单击(){

　　//更改数组以刷新页面

　　this.list.push({a:css})

　　},

　　hadelClick(){

　　//重新赋值以刷新页面

　　this.list=this.list.map(item={

　　item.a=css

　　退货项目

　　})

　　}

　　})

　　/脚本

　　最后提供解决思路（以上都搞不定的话）

　　对象和数组都是通过引用传递的。要成为一个新数组并接受它，您需要更改源，

　　第一种

　　设arr=[]//新数组

　　This.list.forEach(item={ //要呈现的数组

　　//执行你的操作，最后放入arr

　　arr.push(项目)

　　})

　　This.list=arr //相当于返回一个新数组来触发渲染

　　第二种

　　//你想直接改变渲染数组中的数据，但是没有渲染

　　//解决方法：

　　设arr=this . list . slice(0)；//深度复制，(相当于一个新数组)

　　arr.forEach(item={

　　//执行您的操作。

　　})

　　//赋值操作

　　this.list=arr

　　当然，这只是简单介绍。深度复制的详细介绍，请自行百度。

　　如果以上都不能执行，但是你的数据被虚假修改，可以用这个。$forceUpdate()方法(强制刷新)。

　　//这个。$ force update()；//strong制刷新

　　模板

　　差异

　　列表“{item.a}}/div中的div v-for=”项

　　按钮@click=click 更改/按钮

　　Button @click=hadelClick 解决方案/button

　　/div

　　/模板

　　脚本

　　导出默认值({

　　data(){

　　返回{

　　列表：[{a:vue}，{a:react}，{a:js}]，

　　}

　　},

　　方法：{

　　单击(){

　　This.list[0]={a:css} //不呈现页面

　　console . log(this . list)//[{ a: CSS }，{a:react}，{a:js}]

　　},

　　hadelClick(){

　　This.list[0]={a:css} //不呈现页面

　　console . log(this . list)//[{ a: CSS }，{a:react}，{a:js}]

　　这个。$ force update()；//strong制刷新

　　}

　　}

　　})

　　/脚本

　　上面vuex遇到的坑，vuex数据变化，组件中的页面没有渲染，都是边肖分享的内容。希望能给大家一个参考，也希望大家多多支持我们。

郑重声明：本文由网友发布，不代表盛行IT的观点，版权归原作者所有，仅为传播更多信息之目的，如有侵权请联系，我们将第一时间修改或删除，多谢。