vue渲染不出来,vue阻止页面渲染
本文主要介绍了Vue渲染失败的几种原因及解决方法，具有很好的参考价值。希望对大家有帮助。如有错误或不足之处，请不吝赐教。
目录
Vue渲染失败的原因及解决方法1。假设模板2。因为Vue检测不到属性3的添加和删除。对于数组Vue渲染错误，Vue报错并解决。
Vue渲染失败原因及解决
在数据双向绑定中，经常会遇到当数据发生变化时，页面没有同步呈现的情况。
首先Vue 的数据双向绑定原理 是分为
1.observe2.deps3.watcher在observe中，所有的属性都会通过Object.keys()来获取，将一个订阅者推送到deps，
一.假设template中
我在created的hook函数中定义了this.a=1，在btn中添加了事件change this.a。这时，我观察到页面没有被渲染。
模板
div{{a}}
button @ Click= fnb TN Click/button
/div
/模板
原因：Vue无法检测属性的添加或删除。因为Vue将在初始化实例时对属性执行getter/setter转换，所以属性必须存在于数据对象上，Vue才能将其转换为responsive。
解决：
在data中定义属性A，点击按钮，页面会同步呈现。
data(){
返回{
答：1
}
},
二.因为Vue无法检测到属性的添加和移除
所以以下操作，页面也没办法同步渲染
模板
差异
p v-for=(value，key) in obj
{{value}}
/p
button @ Click= fnb TN Click/button
/div
/模板
data(){
返回{
目标
答：1，
乙：2
}
}
},
fnbtn(){
this.obj.c=3
},
解决：
1.在数据中，obj的默认生成定义了一个c，obj:{ a:1，b:2，c:}。如果直接呈现，将呈现一个空的dom元素，因此最好在计算的。
计算值：{
objFilter(){
let new obj=JSON . parse(JSON . stringify(this . obj))
for(let key in newObj){
如果(！newObj[key]){
删除newObj[key]
}
}
返回newObj
}
},
2.上面的方法比较麻烦，Vue提供了原生方法来处理。此方法可以向嵌套对象添加响应属性。
这个。$set(this.obj， c ，3)
3.如果要删除属性B，直接使用this.obj.b= ，但是最好结合计算属性的方法，避免产生无用的标签。此外，Vue还可以通过采用另一种方法来达到预期的效果。
this.obj=Object.assign({}，{ a: 1})
相当于再次为obj指向一个新对象，此时查看控制台中没有空标签。
三. 对于数组
当您直接更改arr[i]的值时，它不会触发响应呈现。
p v-for=i in arr
{{i}}
/p
This.arr[0]=8 //此时，数组确实发生了变化，但是不会触发响应呈现。
原因：
Vue无法检测到以下阵列中的更改：
直接按索引设置数组项时，例如：vm.items[indexOfItem]=newValue修改数组长度时，例如：VM . items . length=new length解决：
1.用上面这个。$set方法。
这个。$set(this.arr，0，8) //因为数组也可以理解为key为索引{0:1，1:2，2:3，3:4}的对象
采用拼接
splice(indexOfItem，1，newValue)
下面的方法可以通过操作数组来触发响应，直接给数组重新赋值也可以触发响应(this.arr=newArr)。
1.按()2。Pop () 3。Shift () 4。Unshift () 5。拼接(Splice)拼接6 .排序(sort)分类… 7 .反转(reverse)反转。以上是容易导致渲染错误的几种情况和解决方法。当数据发生变化，页面没有呈现时，就需要分析数据响应的哪一步出现了问题。
扩展：异步更新(即当数据发生变化且尚未渲染到dom时，此时要获取的dom元素的值为旧值)
你可以用这个。$nextTick(fn(){})获取新值。
这个。$nextTick(fn(){})返回一个Promise对象，因此它可以与async await结合使用。
Vue渲染错误问题
Vue 报错
[Vue warn]:呈现错误：" TypeError:无法读取undefined的属性" 1 "
原因
组件，请使用异步加载数据来呈现该组件。当组件第一次被呈现时，数据对象还没有被分配。此时，由于缺少数据，组件渲染将报告一个错误。
解决
使用v-if控件，组件将不会被呈现，直到异步获得数据。
以上个人经历，希望能给大家一个参考，也希望大家多多支持我们。
郑重声明：本文由网友发布，不代表盛行IT的观点，版权归原作者所有，仅为传播更多信息之目的，如有侵权请联系，我们将第一时间修改或删除，多谢。