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

单选框和复选框的区别

• 单选框(Radio Button) 允许用户从给定的选项中选择一个选项。用户只能选择其中一个选型，而且一旦选择一个选型，在没有其他交互的情况下无法取消选择。通常，单选框用于提供一组相关但互斥的选项，例如选择性别时，男和女就是互斥的选项。
• 复选框(CheckBox) 允许用户从给定的选项中选择一个或多个选项。用户可以同时选择多个选项，也可以取消之前的选项。复选框通常用于提供一组相互独立的选项，例如在购物车中选择多个产品时，用户可以同时选择多个复选框。

注意：

• 在uniapp开发时，如果想要使用radio单选框组件设置勾选的状态，因为radio组件在微信开发文档中并没有change事件，既然没有可以使用最传统的方式-点击事件

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

• 首先给radio设置点击事件，并使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>

注意：

• 通过打印出value发现,isChecked的值确实在点击的时候发生变化，但是在小程上当前点击的radio状态却没有发生变化

思考：

是什么原因，让radio状态没有发生变化？

提示：

• 计算属性的特点是什么？

解答：

• 计算属性的其中一个特点是：可缓存与非可缓存：计算属性默认是可缓存的，这意味着当计算属性所依赖的数据不变时，多次访问该属性会返回缓存的结果，而不会触发重复计算。
• 缓存：在Vue.js中，计算属性的缓存默认是开启的，只要计算属性所依赖的数据没有变化，多次访问该属性会返回缓存的结果，而不会重复计算。通俗的说就是当第一次取出原数据，会把数据放置在缓存中，将来再次访问的时候，只要原数据没有变，就会从缓存中去找

在上述案例中

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

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

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

• 所以要改变vuex里的数据还需要通过commit来触发

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

总结

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

最新评论