商品分类（五）-控制左侧菜单切换——计算属性computed的数据结果，依赖于data中的数据，data中的数据变化，计算属性中的数据会同步进行相应变化

it2026-08-25 8

实现左侧菜单切换——计算属性computed的数据结果，依赖于data中的数据，data中的数据变化，计算属性中的数据会同步进行相应变化

左侧菜单绑定事件控制右侧内容变化 changeBrand (index) { // 切换右侧商标 this.currentIndex = index }

实例：

绑定左侧一级菜单的结构，绑到父级上 @click='handleChange',同时id也添加动态绑定 :data-id='item.cat_id'

<div class="left" @click='handleChange'> <div :data-id='item.cat_id' :key='item.cat_id' v-for='item in cate' :class="['menu-item', {active: currentId === item.cat_id}]"> {{item.cat_name}} </div> </div>

在methods里面定义方法

handleChange (e) { // 控制菜单的切换 // console.log(e.target.dataset.id) let id = e.target.dataset.id //根据事件对象e，得到id值 this.currentId = id },

console.log(e.target.dataset.id)显示为

此时，可以实现一级菜单正常切换功能

计算属性的特点：计算属性的数据结果，依赖于data中的数据，data中的数据变化，计算属性中的数据会同步进行相应变化

如果data中的数据发生变化，那么计算属性会重新计算结果，计算属性会基于之前的计算结果进行缓存(如果计算属性依赖的data发生变化，那么计算属性就会重新计算)

所以，id值变化，二级菜单的id同步变化；通过计算属性，引起三级菜单id值变化

export default { data () { return { currentId: 1, cate: [] } }, //2.二级菜单的currentId值变化，引起三级菜单cat_id值变化，所以切换一级菜单，二三级菜单会同步变化 computed: { // console.log('------------------') // 如果data中的数据发生变化，那么计算属性会重新计算结果 // 计算属性会基于之前的计算结果进行缓存(如果计算属性依赖的data发生变化，那么计算属性就会重新计算) rightData: function () { // 从全部数据中获取当前一级分类对应的右侧数据 let data = this.cate.filter(item => { return item.cat_id === this.currentId }) // 数组中必须有数据，才能获取对应的子属性 let rlist = data.length > 0 && data[0].children return rlist } }, methods: { //1.此处一级菜单id值变化，引起data中的currentId值同步变化 handleChange (e) { // 控制菜单的切换 // console.log(e.target.dataset.id) let id = e.target.dataset.id this.currentId = id }, async loadData () { // 调用接口获取分类数据 let data = await request('categories') this.cate = data } }, created () { this.loadData() }, components: { SearchBar } }

计算属性会基于之前的计算结果进行缓存，改为数据，计算属性里面内容会触发重新进行计算

上面计算属性中的console.log('------------------')，检验缓存，显示为

补充：

关于计算属性的缓存问题——计算属性的优点：基于之前的计算结果进行缓存

<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Document</title> </head> <body> <div id="app"> <div>{{showMsg}}</div> <div>{{showMsg}}</div> <div>{{showInfo()}}</div> <div>{{showInfo()}}</div> </div> <script type="text/javascript" src="./vue.js"></script> <script type="text/javascript"> /* 计算属性的优点：基于之前的计算结果进行缓存 */ new Vue({ el: '#app', data: { msg: 'hello' }, methods: { showInfo: function () { console.log('=============') return this.msg + 'JERRY' } }, computed: { showMsg: function () { console.log('-------------') return this.msg + ' TOM' } } }) </script> </body> </html>

计算属性的缓存验证，打印结果显示为：

hello Tom，第二次打印时，并没有再次调用计算属性；仅仅呈现上次结果，起到缓存作用：基于已有的计算结果，进行缓存，只要依赖的数据不发生变化，显示所有的结果只计算一次，节省时间，起到性能优化作用

showInfo JERRY，如果是函数，使用一次，就调用一次

总结：

计算属性会基于之前的计算结果进行缓存(如果计算属性依赖的data发生变化，那么计算属性就会重新计算)

计算属性的缓存机制，使用场景，属于性能优化

同一个页面中，计算属性使用了多次，它会缓存之前的数据。

最新回复(0)