网站建设和编辑实训报告,wordpress主题繁体,厦门百度网站建设,泰州网站制作公司明确一点
vue的响应式系统不支持Map和Set#xff0c;也就是说#xff0c;当Map与Set里面的元素变化时Vue追踪不到这些变化#xff0c;因此无法做出响应。
如下demo其实是不会进行数据相应的
h1 v-for(item,index) in mySetAsList :keyindex也就是说当Map与Set里面的元素变化时Vue追踪不到这些变化因此无法做出响应。
如下demo其实是不会进行数据相应的
h1 v-for(item,index) in mySetAsList :keyindex{{item}}/h1
button clickadd按钮/buttondata() {return {i: 1,mySetChangeTracker: 1,mySet: new Set(),}}computed: {mySetAsList() {console.log(...this.mySet)let x this.mySetChangeTrackerreturn [...this.mySet];}
},methods: {add() {this.mySet.add(this.i);this.mySetChangeTracker 1;}}如何让map和set可以响应
1、创建一个可以相应的简单数据结构利用vue已有的api将这个简单数据结构和map或者set关联起来 2、需要创建此结构的可序列化副本并将其暴露给Vue
h1 v-for(item,index) in mySetAsList :keyindex{{item}}/h1
button clickadd按钮/buttondata() {return {i: 1,mySetChangeTracker: 1,mySet: new Set(),}}computed: {mySetAsList() {let x this.mySetChangeTrackerconsole.log(...this.mySet)return [...this.mySet];}
},methods: {add() {this.mySet.add(this.i);this.mySetChangeTracker 1;}}也可以确定一下vue计算属性的用法只要计算属性中用到了响应式数据响应式数据发生变化其实也就会触发到该计算属性使用到的地方并不是必须返回一个响应式数据
计算属性的setget用法
当触发add方法时视图层会由 XiaoMing 变化为 ZhangMing本质上就是响应式数据变化触发了计算属性的get方法 h1{{fullName}}/h1data: function() {return {firstName: Xiao,lastName: Ming};
},computed: {fullName:{get(){//回调函数 当需要读取当前属性值是执行根据相关数据计算并返回当前属性的值return this.firstName this.lastName},set(val){//监视当前属性值的变化当属性值发生变化时执行更新相关的属性数据//val就是fullName的最新属性值console.log(val)const names val.split( );console.log(names)this.firstName names[0];this.lastName names[1];}}},methods: {add() {this.firstName Zhang}}当触发add方法时给计算属性赋值此时会触发计算属性的set方法set函数中是可以对响应式数据进行一些处理的如下代码
set 改变响应式数据 响应式数据变化又触发了计算属性的get add方法触发时界面显示Zhang fan
data: function() {return {firstName: Foo,lastName: Bar};
},computed: {fullName:{get(){//回调函数 当需要读取当前属性值是执行根据相关数据计算并返回当前属性的值return this.firstName this.lastName},set(val){//监视当前属性值的变化当属性值发生变化时执行更新相关的属性数据//val就是fullName的最新属性值console.log(val)const names val.split( );console.log(names)this.firstName names[0];this.lastName names[1];}}},methods: {add() {this.fullName Zhang fan}计算属性特点
1、具有缓存性页面重新渲染值不变化,计算属性会立即返回之前的计算结果而不必再次执行函数 2、是计算值 3、应用就是简化tempalte里面{{}}计算和处理props或$emit的传值
