vue.set
官方解释：向响应式对象中添加一个 property，并确保这个新 property 同样是响应式的，且触发视图更新。它必须用于向响应式对象上添加新 property，因为 Vue 无法探测普通的新增 property (比如 this.myObject.newProperty = ‘hi’) 如果在实例创建之后添加新的属性到实例上，它不会触发视图更新 由于 JavaScript 的限制，Vue 不能检测出数据的改变，所以当我们需要动态改变数据的时候，Vue.set()完全可以满足我们的需求 常见的坑就是直接改变了data中复杂类型变量的属性值，视图没有更新 Vue.set( target, key, value ) target：要更改的数据源(可以是对象或者数组) key：要更改的具体数据 value ：重新赋的值
<!DOCTYPE html>
<html>
<head lang="en">
<meta charset="UTF-8">
<title></title>
</head>
<body>
<div id="app2">
<p v-for="item in items" :key="item.id">
{
{
item.message}}
</p>
<button class="btn" @click="btnChange()">改变data中的值</button><br/>
<button class="btn" @click="btnAdd()">新增data中的值</button>
</div>
<script src="../../dist/vue.min.js"></script>
<script>
var vm2=new Vue({
el:"#app2",
data:{
items:[
{
message:"Test1",id:"1"},
{
message:"Test2",id:"2"},
{
message:"Test3",id:"3"}
]
},
methods:{
btnChange(){
Vue.set(this.items,0,{
message:"Change Test",id:10})
// this.$set(this.items,0,{message:"Change Test",id:10})
},
btnAdd(){
const itemLen=this.items.length;
Vue.set(this.items,itemLen,{
message:"Test add attr",id:itemLen});
//this.$set(this.items,itemLen,{message:"Test add attr",id:itemLen});
}
}
});
</script>
</body>
</html>
vue.filter
自定义过滤器(filter)，可被用于一些常见的文本格式化
