vue watch和computed的使用场景
watch 监听某个数据的变化(监听完调用什么函数) 一个数据影响多个数据 (比如:浏览器自适应、监控路由对象、监控自身属性变化)
watch: {
firstName(val) { this.fullName = val + this.lastName }
} computed: {
fullName() { this.firstName + this.lastName; }
}
watch 场景:
1、自适应浏览器(监听浏览器宽高、如果有变化就存在localStorage里面去,或者有变化就通知其他组件改变化)
data() {
return {
height: ''
}
},
mounted() {
const _this = this
this.height = document.documentElement.clientHeight
localStorage.setItem('whVal', JSON.stringify({'height': this.height }))
window.onresize = function temp() {
_this.height = document.documentElement.clientHeight
}
},
watch: {
// 如果发生改变,这个函数就会运行
height() {
this.changeFixed(this.width, this.height)
// eventBus.$emit('onresize', {'height': this.height }) 或者通知其他组件变化
}
},
methods: {
changeFixed(width, height) { // 动态修改样式
localStorage.setItem('Layout', JSON.stringify({'height': height }))
}
}
2、监控路由对象
new Vue({
el: '#app',
router: router, //开启路由对象
watch: {
'$route': function(newroute, oldroute) {
console.log(newroute, oldroute);
//可以在这个函数中获取到当前的路由规则字符串是什么
//那么就可以针对一些特定的页面做一些特定的处理
}
}
})
computed 场景:
1、作为过滤器:展开更多
<li v-for="(item,index) in addressListFilter" :class="{'check':checkIndex == index}" @click="checkIndex=index;selectedAddrId=item._id"></li>
<a @click="expand" v-bind:class="{'open':limit>3}">展开更多</a> data(){
return {
addressList:[], // 地址列表
limit:3, // 限制默认显示3个地址
checkIndex:0
}
},
computed:{
addressListFilter(){
return this.addressList.slice(0,this.limit);
}
},
methods:{
expand(){ // 点击more更多
if(this.limit ==3){
this.limit = this.addressList.length;
}else{
this.limit =3;
}
}
}
}
2、作为过滤器:tab切换
<span v-for="(item,index) in navList" :key="index" @click="type = index" :class="{'active':type===index}">{{item}}</span>
<li v-for="(item,index) in taskListfilter" :key="index">
</li>
data() {
return {
navList: ['全部', '实时单', '竞价单'],
type:0,
taskList:[]
}
},
computed: {
taskListfilter() {
switch (this.type) {
case 0:return this.taskList
case 1:return this.taskList.filter(item => item.type === '实时单')
case 2:return this.taskList.filter(item => item.type === '竞价单')
// default :return this.taskList
}
}
}
vue watch和computed的使用场景的更多相关文章
- Vue.js中 computed 和 methods 的区别
官方文档中已经有对其的解释了,在这里把我的理解记录一下Vue中的methods.watch.computed computed 的使用场景 HTML模板中的复杂逻辑表达式,为了防止逻辑过重导致不易维护 ...
- vue系列---理解Vue中的computed,watch,methods的区别及源码实现(六)
_ 阅读目录 一. 理解Vue中的computed用法 二:computed 和 methods的区别? 三:Vue中的watch的用法 四:computed的基本原理及源码实现 回到顶部 一. 理解 ...
- 实例分析Vue.js中 computed和methods不同机制
在vue.js中,有methods和computed两种方式来动态当作方法来用的 1.首先最明显的不同 就是调用的时候,methods要加上() 2.我们可以使用 methods 来替代 comput ...
- vue Watcher分类 computed watch
1.Watcher构造函数源码部分代码 if (options) { this.deep = !!options.deep this.user = !!options.user this.lazy = ...
- Vue 中的 computed 和 methods
Vue 中的 computed 和 methods 使用 computed 性能会更好. 如果你不希望缓存,可以使用 methods 属性.
- vue中methods,computed,filters,watch的总结
08.28自我总结 vue中methods,computed,filters,watch的总结 一.methods methods属性里面的方法会在数据发生变化的时候你,只要引用了此里面分方法,方法就 ...
- 详解Vue中的computed和watch
作者:小土豆 博客园:https://www.cnblogs.com/HouJiao/ 掘金:https://juejin.cn/user/2436173500265335 1. 前言 作为一名Vue ...
- Vue核心知识-computed和watch的使用场景和方法
https://www.jianshu.com/p/bb7a2244c7ca
- vue中的computed(计算属性)和watch(监听属性)的特点,以及深度监听
//计算属性是根据data中已有的属性,计算得到一个新的属性, <div>全名:{{fullName}}</div> 创建计算属性通过computed关键字,它是一个对象 计算 ...
随机推荐
- LaTeX Windows配置
1. 安装TeXstudio 用搜索引擎找合适的版本或者 在 https://sourceforge.net/projects/texstudio/ 下载 找合适的版本下载,点击下一步安装即可. Te ...
- HDU -1166 线段树
#include <algorithm> #include <iostream> #include<sstream> #include<cstring> ...
- 吴裕雄--天生自然 PYTHON3开发学习:网络编程
# 导入 socket.sys 模块 import socket import sys # 创建 socket 对象 serversocket = socket.socket( socket.AF_I ...
- Appium获取元素的方式
1.apk包名和launcherActivity 1.1.获取包名 所有应用包名列表 adb shell pm list packages 第三方应用包名列表 adb shell pm list pa ...
- linux下tab作用的描述?
[Tab] 接在一串指令的第一个字的后面,则为命令补全; 实例怎么描述?什么叫一串指令的第一个字?[Tab] 接在一串指令的第二个字以后时,则为『文件补齐』 实例怎么描述?什么叫一串指令的 ...
- 联想的amd电脑,Debian8.8开机后亮度值始终最大,尝试过各种方法,始终无法解决,最后debian8.8在安装开源驱动后,成功调节
安装ATI显卡驱动(开源)(方法步骤来自Debian WiKi) A.先升级可用的包 # aptitude upgrade B.安装下面3个包 # apt-get install firmware-l ...
- Downton Abbey
1. 当女儿以为泰坦尼克号不会沉的时候,父亲用了一个有意思的比喻: - I thought it was supposed to be unsinkable. - Every mountain is ...
- Java BigInteger详解
BigInteger概述 可用于无限大的整数计算 所在的包 java.math.BigInteger; 构造函数 public BigInteger(String val) 成员函数 比较大小函数 p ...
- redis数据库写入数据时提示redis.exceptions.ResponseError错误
今天运行Django项目在redis数据库写入数据时提示如下错误: ERROR log 228 Internal Server Error: /image_code/cf9ccd75-d274-45c ...
- npm 切换成淘宝镜像
npm install nrm -g nrm use taobao