解读单选框和复选框的区别(涉及computed的缓存)
作者:柠檬树^-^
这篇文章主要介绍了单选框和复选框的区别(涉及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>
总结
以上为个人经验,希望能给大家一个参考,也希望大家多多支持脚本之家。