javascript技巧

关注公众号 jb51net

关闭
首页 > 网络编程 > JavaScript > javascript技巧 > 单选框和复选框的区别(涉及computed的缓存)

解读单选框和复选框的区别(涉及computed的缓存)

作者:柠檬树^-^

这篇文章主要介绍了单选框和复选框的区别(涉及computed的缓存),具有很好的参考价值,希望对大家有所帮助,如有错误或未考虑完全的地方,望不吝赐教

单选框和复选框的区别

注意:

需求:当点击radio让当前的状态改变

import Vue from 'vue'
import Vuex from 'vuex'

// 插件的方式来使用
Vue.use(Vuex)

// 创建一个store对象并暴露出去
const store= new Vuex.Store({
    state:{
        isCheck:true,
    },
    mutations:{
        updateCheck(state,isCheck){
            state.isCheck=isCheck
        }
    }
})
export default store
<view>
  <radio @click="changeCheck(isChecked)" :checked="isChecked"></radio>
</view>

<script>
   ecport default{
      computed:{
         isChecked(){
            return JSON.parse(JSON.stringfy(this.$store.state.isCheck))
     }
   },
      methods:{
       changeCheck(value){
          value=!value
          console.log(value)
      }
   }
}
</script>

注意:

思考:

是什么原因,让radio状态没有发生变化?

提示:

解答:

在上述案例中

计算属性的作用是根据内部依赖的数据,自动计算出一个结果返回,但是isChecked内部依赖的数据是从vuex深拷贝出来的数据对象,vuex数据变化了,计算属性才会去计算

但是注意的是,在点击事件changeCheck中,value!=value并没有改变vuex中的数据,value来自isChecked,isChecked不是vuex中的数据,是通过深拷贝得到的,所以修改的是isChecked的值

只要计算属性做了深拷贝,那么修改计算属性中对象的属性值,就不会影响原数据,自然也就不会触发计算属性的更新

<script>
   ecport default{
      methods:{
       changeCheck(value){
          value=!value
          console.log(value)
          this.$store.commit('updateCheck',this.isChecked)
      }
   }
}
</script>

总结

以上为个人经验,希望能给大家一个参考,也希望大家多多支持脚本之家。

您可能感兴趣的文章:
阅读全文