vue监听器watch & 计算属性computed
侦听器watch
vue中watch是用来监听vue实例中的数据变化
watch监听时有几个属性:
handle
:其值是一个回调函数,就是监听对象对话的时候需要执行的函数deep
:其值true 或者 false,是否深度监听(一般监听是不能监听到对象属性值变化的,数组除外)immediate
:其值 true 或者 false,是否以当前的初始值执行handle函数(当值第一次绑定时,不会执行监听函数,只有值发生改变时才会执行。如果我们需要在最初绑定值的时候也执行函数,则就需要用到immediate属性。)。
监听基本类型数据
<script>
export default {
name: "jianting",
data() {
return {
msg: "1223"
};
},
watch: {
msg: function(newVal, oldVal) {
// TO DO
console.log("newVal:", newVal);
console.log("oldVal:", oldVal);
}
},
methods: {
stringClick() {
this.msg = Math.random() * 100;
}
}
};
</script>
监听对象
<script>
export default {
name: "jianting",
data() {
return {
obj: {
name: "Tony",
age: 50,
children: [
{
name: "小明",
age: 12
},
{
name: "小花",
age: 5
}
]
}
};
},
watch: {
obj: {
handler: function(newVal, oldVal) {
// TO DO
console.log("newVal:", newVal);
console.log("oldVal:", oldVal);
},
deep: true,
immediate: true
},
"obj.name": function(newVal, oldVal) {
// TO DO
console.log("newVal obj.name:", newVal);
console.log("oldVal obj.name:", oldVal);
}
},
methods: {
click() {
this.obj.name = "未知";
}
}
};
</script>
- deep: watch监听对象的时候,需要加deep:true,只有这样才能深入底层去实时监听,不加对象是监听不到变化的,
- immediate: 添加immediate时会在侦听开始之后被立即调用
监听路由
方法一:
watch: {
//$route.path == this.$route.path
'$route.path': function(newVal,oldVal){
if(newVal === '/login'){
console.log('欢迎进入login')
}else if(newVal === '/register'){
console.log('欢迎进入register')
}
}
}
方法二:
// 监听,当路由发生变化的时候执行
watch:{
$route(to,from){
console.log(to.path);
}
},
计算属性computed
computed:{
//完整写法
fullName:{
get(){
return this.firstName + '-' + this.lastName
},
set(value){
let arr = value.split('-')
this.firstName = arr[0]
this.lastName = arr[1]
}
}
//简写
fullName(){
console.log('get被调用了')
return this.firstName + '-' + this.lastName
}
}
简写形式相当于只调用了get函数
computed和watch之间的区别
- computed能完成的功能,watch都可以完成。
- watch能完成的功能,computed不一定能完成,例如watch可以进行异步操作。
- watch只能侦听data中存在的属性;computed可以定义data中不存在的属性,该属性也会出现在vue实例中供使用,就跟定义在data中一样
两个重要的小原则:
- 所被Vue管理的函数,最好写成普通函数,这样this的指向才是vm 或 组件实例对象。
- 所有不被Vue所管理的函数(定时器的回调函数、ajax的回调函数等、Promise的回调函数),最好写成箭头函数,这样this的指向才是vm 或 组件实例对象。
vue监听器watch & 计算属性computed的更多相关文章
- Vue教程:计算属性computed与侦听器watch(三)
计算属性computed 模板内的表达式非常便利,但是设计它们的初衷是用于简单运算的.在模板中放入太多的逻辑会让模板过重且难以维护.例如: <div id="example" ...
- [Vue]method与计算属性computed、侦听器watch与计算属性computed的区别
一.方法method与计算属性computed的区别 方法method:每当触发重新渲染时,调用方法method将总会再次执行函数: 计算属性computed:计算属性computed是基于它们的响应 ...
- 怎样理解 Vue 中的计算属性 computed 和 methods ?
需求: 在 Vue 中, 我们可以像下面这样通过在 引号 或 双花括号 内写 js 表达式去做一些简单运算, 这是可以的, 不过这样写是不直观的, 而且在 html 中 夹杂 一些运算逻辑这种做法其实 ...
- VUE学习之计算属性computed
计算属性:computed 先看一下官网的说法 模板内的表达式非常便利,但是设计它们的初衷是用于简单运算的.在模板中放入太多的逻辑会让模板过重且难以维护.例如: <div id="ex ...
- Vue 监听器和计算属性到底有什么不同?
各自的适用场景 计算属性临时快照 官方文档对于计算属性提到了一个重要的点子--"临时快照"(可能就是前面说的计算属性缓存),每当源状态发生变化时,就会创建一个新的快照. 有时候创建 ...
- Vue学习3:计算属性computed与监听器
下面是计算属性相关代码: <!DOCTYPE html> <html lang="en"> <head> <meta charset=&q ...
- Vue(基础三)_监听器与计算属性
一.前言 本文主要涉及: 1.watch()监听单个属性 2.computed可以监听多个属性 3.点击li标签切换音乐案例 二.主要内容 1.watch()监听器(监听单一数据) (1)监听 ...
- vue从入门到进阶:计算属性computed与侦听器watch(三)
计算属性computed 模板内的表达式非常便利,但是设计它们的初衷是用于简单运算的.在模板中放入太多的逻辑会让模板过重且难以维护.例如: <div id="example" ...
- 温故vue对vue计算属性computed的分析
vue 复习笔记(1)一段时间没有看过vue的官方文档了,温故而知新,所以我决定将vue的文档在看一遍 1计算属性computed在vue的computed中声明的是计算属性,可以使用箭头函数来进行定 ...
随机推荐
- 为什么'\x1B'.length===1?\x与\u知识延伸
背景 先讲一下背景,再说原因 大多数库都会在日志中使用chalk库为console的内容进行上色 被chalk处理后,其原本的内容会被'\x1B...'所包裹 console.log(chalk.bl ...
- asp.net core 集成swagger ui
什么是Swagger? 说swagger 之前,我们先说一下OpenApi 规范. OpenApi 是一种和语言无关的用于描述RESTAPIs 接口功能的一种规范,对RESTAPIs 接口的描述包括: ...
- mysql从零开始之MySQL DELETE 语句
MySQL DELETE 语句 你可以使用 SQL 的 DELETE FROM 命令来删除 MySQL 数据表中的记录. 你可以在 mysql> 命令提示符或 PHP 脚本中执行该命令. 语法 ...
- Go语言之Goroutine与信道、异常处理
一.Goroutine Go 协程可以看做成一个轻量级的线程,Go 协程相比于线程的优势: Goroutine 的成本更低大小只有 2 kb 左右,线程有几个兆. Goroutine 会复用线程,比如 ...
- CSS写一个圣诞树Chrome浏览器小插件
一时兴起,突然想写一个Chrome浏览器插件,不知道写啥,就写了一个圣诞树小插件.项目源码>> Chrome浏览器插件 Chrome浏览器插件最主要的是:index.html.manife ...
- 数据应用的变与不变,ShardingSphere 正在影响未来数字体验的建设理念
近年来关于底层数据库的开源产品越来越多,它们也受到了许多资本的青睐. 伴随着移动互联网催生的数字化场景爆发,云计算.大数据等技术逐渐有了更加广阔的应用场景.在云计算和大数据经过十年的追赶式发展后,不只 ...
- iOS自定义拍照框拍照&裁剪(一)
卡片机时代 很重要的一点是,相机本身是没有方向概念的,它不理解拍摄的内容,只会以相机自己的坐标系去保存数据,下图展示了相机对"F"进行四个角度拍摄时返回的图片数据. 最初的卡片机时 ...
- Apache Common-collection 反序列化利用链解析--TransformedMap链
Apache Common-collection 反序列化利用链解析 TransformedMap链 参考Java反序列化漏洞分析 - ssooking - 博客园 (cnblogs.com) poc ...
- windows右键菜单自动打包发布nuget,没有CI/CD一样方便!
构建现代的 .Net 应用离不开 Nuget 的支持,而快速打包 Nuget 成了提高生产率的有效方法.没有CI/CD?来试试使用windows右键菜单吧 先看右键效果图 有时候我们可能没有CI/CD ...
- 【UE4】GAMES101 图形学作业4:贝塞尔曲线
总览 Bézier 曲线是一种用于计算机图形学的参数曲线. 在本次作业中,你需要实现de Casteljau 算法来绘制由4 个控制点表示的Bézier 曲线(当你正确实现该算法时,你可以支持绘制由更 ...