网站失败后怎么重新建设,医疗网站优化公司,湖北住房城乡建设厅网站,0基础网站开发vue2
由于javascript限制#xff0c;vue不能检测数组和对象的变化 什么意思呢#xff0c;举例子来说吧 深入响应式原理
对象
比如说我们在data里面定义了一个info的对象
templatediv idappdiv姓名: {{ info.name }}/div…vue2
由于javascript限制vue不能检测数组和对象的变化 什么意思呢举例子来说吧 深入响应式原理
对象
比如说我们在data里面定义了一个info的对象
templatediv idappdiv姓名: {{ info.name }}/divdiv年龄: {{ info.age }}/divdiv地址: {{ info.address }}/divbutton clickhandleAddProp追加prop/button/div
/templatescript
export default {name: App,data() {return {info: {name: 于十月,age: 28,},};},methods: {handleAddProp() {this.info.address 山东省济南市;},},
};
/script 我们在info对象里面只定义了name,age两个字段然后我们在页面展示了name,age,address三个字段我们想再点击按钮的时候给address赋值这个时候会有什么效果可以自己试一下效果就是页面上没有任何效果也就是说我们在info声明的时候没有address这个字段后续我们在操作中去修改这个字段vue是不能给我们检测到的
所以要想实现效果的话官方给提供实现方案
Vue.set或者this.$setObject.assign()或者_.extend()
具体实现如下:
templatediv idappdiv姓名: {{ info.name }}/divdiv年龄: {{ info.age }}/divdiv地址: {{ info.address }}/divdiv手机号: {{ info.phone }}/divbutton clickhandleAddProp追加prop/button/div
/templatescript
export default {name: App,data() {return {info: {name: 于十月,age: 28,},};},methods: {handleAddProp() {// this.info.address 山东省济南市;this.$set(this.info, address, 山东省济南市);// orthis.info Object.assign({}, this.info, { phone: 138888888888 });},},
};
/script
数组
vue不能检测以下数组的变动
当你利用索引直接设置一个数组项时 vm.items[index] newValue当你修改数组的长度时 vm.items.length newLength
templatediv idappp v-for(val, index) in list :keyindex{{ val }}/pbutton clickhandleChangeList修改数组项/button/div
/templatescript
export default {name: App,data() {return {list: [1, 2, 3, 4],};},methods: {handleChangeList() {this.list[0] 小明;},},
};
/script我们希望点击按钮的时候1能够变成小明,但发现并没有任何效果要想实现的话也可以使用$set
templatediv idappp v-for(val, index) in list :keyindex{{ val }}/pbutton clickhandleChangeList修改数组项/button/div
/templatescript
export default {name: App,data() {return {list: [1, 2, 3, 4],};},methods: {handleChangeList() {// this.list[0] 小明;this.$set(this.list, 0, 小明);},},
};
/script
vue3
我们可以按照上面的数据在vue里面试一下
script setupconst info reactive({name: 于十月,});const list ref([1, 2, 3]);const handleAddProp () {info.address 山东省济南市;info.age 28;};const handleChangeList () {list.value[0] 小明;};
/scripttemplatediv姓名: {{ info.name }} -- 年龄 {{ info.age }} --- {{ info.address }}/diva-button clickhandleAddProp修改prop/a-buttondivp v-for(val, index) in list :keyindex{{ val }}/p/diva-button clickhandleChangeList修改数组的值/a-button
/template 然后发现不需要做特殊的处理就可以实现我们想要的效果
其实这里面就牵扯到了关于vue2与vue3内部实现响应式的原理了vue2使用definePropertyvue3的时候直接放弃用了proxy 具体怎么他俩怎么实现的后面在写
这就可以延伸出来很多面试题比如 1.vue2跟vue3在处理数据这一块有什么不同吗 2.vue2里面我往对象里面新增一个属性这个时候界面会有变化吗 3.为什么使用 $set之后就可以实现数据的响应, $set的实现原理是什么 4.vue2在处理对象和数据的时候有什么弊端 。。。。。 即使没搞明白深层原理把官方文档看明白碰到这些问题也会迎刃而解~
