oclick vue 传参 函数_详解Vue计算属性和侦听属性
关注【搜狐技术产品】公众号,第一时间获取技术干货
作者介绍:
本期特邀作者:浪里行舟
Github博客2600 star作者,专注于前端领域。个人公众号:「前端工匠」,致力于打造适合初中级工程师能够快速吸收的一系列优质文章!
一、前言
一些初学者可能对计算属性和侦听属性的使用场景感到困惑不解,本文主要介绍两者的用法、使用场景及两者的区别。
本文的代码请猛戳github博客,纸上得来终觉浅,大家多动手敲敲代码!
二、计算属性
1.介绍
计算属性是自动监听依赖值的变化,从而动态返回内容。监听是一个过程,在监听的值变化时,可以触发一个回调,并做一些事情。它有以下几个特点:
- 数据可以进行逻辑处理,减少模板中计算逻辑
- 对计算属性中的数据进行监视
- 依赖固定的数据类型(响应式数据)
计算属性由两部分组成:get和set,分别用来获取计算属性和设置计算属性。默认只有get,如果需要set,要自己添加。另外set设置属性,并不是直接修改计算属性,而是修改它的依赖:
1computed: {2 fullName: {3 // getter4 get: function () {5 return this.firstName + ' ' + this.lastName6 },7 // setter8 set: function (newValue) {9 //this.fullName = newValue 这种写法会报错
10 var names = newValue.split(' ')
11 this.firstName = names[0]//对它的依赖进行赋值
12 this.lastName = names[names.length - 1]
13 }
14 }
15}
现在再运行 vm.fullName = 'John Doe' 时,setter 会被调用,vm.firstName 和 vm.lastName 也会相应地被更新。
2.计算属性 vs 普通属性
可以像绑定普通属性一样在模板中绑定计算属性,但是它们在定义上有区别,即计算属性的属性值必须是一个函数:
1data:{ //普通属性2 msg:'浪里行舟',3},4computed:{ //计算属性5 msg2:function(){ //该函数必须有返回值,用来获取属性,称为get函数6 return '浪里行舟';7 },8 reverseMsg:function(){9 //可以包含逻辑处理操作,同时reverseMsg依赖于msg,一旦msg发生变化,reverseMsg也会跟着变化
10 return this.msg.split(' ').reverse().join(' ');
11 }
12}
3.计算属性 vs 方法
两者最主要的区别:computed 是可以缓存的,methods 不能缓存;只要相关依赖没有改变,多次访问计算属性得到的值是之前缓存的计算结果,就不会多次执行。网上有种说法就是方法可以传参,而计算属性不能,其实并不准确,计算属性可以通过闭包来实现传参:
1:data="closure(item, itemName, blablaParams)"
2computed: {
3 closure () {
4 return function (a, b, c) {
5 /** do something */
6 return data
7 }
8 }
9}
三、侦听属性
Vue 提供了一种更通用的方式来观察和响应 Vue 实例上的数据变动:侦听属性watch。Watch中可以执行任何逻辑,如函数节流、Ajax异步获取数据,甚至操作 DOM(不建议)。
1.常规用法
1<template>2 <div class="attr">3 <h1>watch属性</h1>4 <h2>{{ $data }}</h2>5 <button @click="() => (a += 1)">修改a的值</button>6 </div>7</template>8<script>9export default {
10 data() {
11 return {
12 a: 1,
13 b: { c: 2, d: 3 },
14 e: {
15 f: {
16 g: 4
17 }
18 },
19 h: []
20 };
21 },
22 watch: {
23 a: function(val, oldVal) {
24 this.b.c += 1;
25 },
26 "b.c": function(val, oldVal) {
27 this.b.d += 1;
28 },
29 "b.d": function(val, oldVal) {
30 this.e.f.g += 1;
31 },
32 e: {
33 handler: function(val, oldVal) {
34 this.h.push("浪里行舟");
35 },
36 deep: true //用于监听e对象内部值的变化
37 }
38 }
39};
40</script>
2.使用 watch 的深度遍历和立即调用功能
使用 watch 来监听数据变化的时候除了常用到的 handler 回调,其实还有两个参数,它们是:
- deep 设置为 true 用于监听对象内部值的变化
- immediate 设置为 true 将立即以表达式的当前值触发回调
1<template>2 <button @click="obj.a = 2">修改</button>3</template>4<script>5export default {6 data() {7 return {8 obj: {9 a: 1,
10 }
11 }
12 },
13 watch: {
14 obj: {
15 handler: function(newVal, oldVal) {
16 console.log(newVal);
17 },
18 deep: true,
19 immediate: true
20 }
21 }
22}
23</script>
以上代码我们修改了 obj 对象中 a 属性的值,我们可以触发其 watch 中的 handler 回调输出新的对象,而如果不加 deep: true,我们只能监听 obj 的改变,并不会触发回调。同时我们也添加了 immediate: true 配置,其会立即以 obj 的当前值触发回调。我们再看一个实际工作中常遇到的场景:组件创建的时候我们获取一次列表的数据,同时监听input框,每当发生变化的时候重新获取一次筛选后的列表:
1created(){
2 this.fetchPostList()
3},
4watch: {
5 searchInputValue(){
6 this.fetchPostList()
7 }
8}
有没有办法优化一下呢?
1watch: {
2 searchInputValue:{
3 handler: 'fetchPostList',
4 immediate: true
5 }
6}
首先,在watchers中,可以直接使用函数的字面量名称;其次,声明immediate:true表示创建组件时要立马执行一次。
四、两者之间对比
从上面流程图中,我们可以看出它们之间的区别:
- watch:监测的是属性值, 只要属性值发生变化,其都会触发执行回调函数来执行一系列操作;
- computed:监测的是依赖值,依赖值不变的情况下其会直接读取缓存进行复用,变化的情况下才会重新计算。
除此之外,有点很重要的区别是:计算属性不能执行异步任务,计算属性必须同步执行。也就是说计算属性不能向服务器请求或者执行异步任务。如果遇到异步任务,就交给侦听属性。Watch也可以检测computed属性。
接下来我们看个用watch来实现防抖的例子:直到用户停止输入超过1秒后,才更新视图:
1<template>2 <div>3 {{ fullName }}4 <div>firstName: <input v-model="firstName" /></div>5 <div>lastName: <input v-model="lastName" /></div>6 </div>7</template>8<script>9import { setTimeout } from "timers";
10export default {
11 data: function() {
12 return {
13 firstName: "浪里行舟",
14 lastName: "前端工匠",
15 fullName: "浪里行舟 前端工匠"
16 };
17 },
18 watch: {
19 firstName: function(val) {
20 clearTimeout(this.firstTimeout);
21 this.firstTimeOut = setTimeout(() => {
22 this.fullName = val + " " + this.lastName;
23 }, 1000);
24 },
25 lastName: function(val) {
26 clearTimeout(this.lastTimeout);
27 this.lastTimeOut = setTimeout(() => {
28 this.fullName = this.firstName + " " + val;
29 }, 1000);
30 }
31 }
32};
五、总结
计算属性适合用在模板渲染中,某个值是依赖了其它的响应式对象甚至是计算属性计算而来的;而侦听属性适用于观测某个值的变化去完成一段复杂的业务逻辑。
- computed能做的,watch都能做,反之则不行
- 能用computed的尽量用computed
参考资料:
[1]珠峰架构课(强烈推荐)
[2]Vue 项目构建与开发入门
[3]Vue.js 组件精讲
[4]前端面试之道
[5]Vue.js最佳实践(五招让你成为Vue.js大师)
加入搜狐技术作者天团,千元稿费等你来!
获取更多资讯请关注微信公众号【搜狐技术产品】,微信后台联系搜狐技术产品小助手。
oclick vue 传参 函数_详解Vue计算属性和侦听属性相关推荐
- vue调用手机相机相册_详解Vue调用手机相机和相册以及上传
组件 选中{{imgList.length}}张文件,共{{bytesToSize(this.size)}} javaScript代码 export default { name: "cam ...
- vue调用手机相机相册_详解Vue.js调用手机相机和相册以及上传
详解Vue.js调用手机相机和相册以及上传 发布于 2020-7-7| 复制链接 摘记: 组件 ```xhtml .. 组件 ```xhtml --> 选中{{imgList.length}}张 ...
- dom不刷新 vue 加数据后_详解Vue 数据更新了但页面没有更新的 7 种情况汇总及延伸总结...
如果你发现你自己需要在 vue 中做一次强制更新,99.9% 的情况,是你在某个地方做错了事. 1. vue 无法检测实例被创建时不存在于 data 中的 property 原因:由于 vue 会在初 ...
- vue连接后端本地接口_详解vue配置后台接口方式
详解vue配置后台接口方式 在vueAdmin项目中有两种方式配置后端接口的方式,在此做下记录 第一种(代理方式) 在工程目录下 > config > index.js - 修改为如下配置 ...
- vue 变量定义 对象_详解Vue 全局变量,局部变量
局组件和局部组件 1.先定义组件 Vue.component('组件名', { 组件模板对象 }) 注意: 组件名不要使用原生的标签名, 若组件名定义时用的是驼峰命名法, 则调用时用中划线分割后小 ...
- vue底部跳转_详解Vue底部导航栏组件
不多说直接上代码 BottomNav.vue: {{item.name}} export default{ props:['idx'], data(){ return { items:[{ cls:& ...
- vue样式 引入图片_详解Vue.js中引入图片路径的几种方式
vue --version 3.6.3 记录总结一下的Vue中引入图片路径的几种书写方式 vue中静态资源的引入机制 Vue.js关于静态资源的官方文档 静态资源可以通过两种方式进行处理: 在 Jav ...
- vue 修改模板{{}}标签_详解Vue 动态添加模板的几种方法
以下方法只适用于 Vue1.0 版本,推荐系数由高到低排列. 通常我们会在组件里的 template 属性定义模板,或者是在*.vue文件里的 template 标签里写模板.但是有时候会需要动态生成 ...
- vue warning如何去掉_详解 vue 组件三大核心概念
前言 本文主要介绍属性.事件和插槽这三个vue基础概念.使用方法及其容易被忽略的一些重要细节.如果你阅读别人写的组件,可以从这三个部分展开,它们可以帮助你快速了解一个组件的所有功能. 本文的代码请猛戳 ...
最新文章
- LeetCode119.杨辉三角II
- What's New In C# 6.0
- awr报告分析 mysql_AWR报告的生成和简单分析方法
- Python一题三解:查找总分等于特定值的同学成绩
- BIM族库下载——BIM项目停车场管理系统常用族库
- 一套很好的51单片机教程,云龙51单片机视频教程(王云)
- SVM-支持向量机算法概述
- 最小环flody hdu6080
- 【裸眼3D】 图形图像空洞填充
- 【Apache Shiro 身份认证绕过漏洞 (CVE-2022-32532)-漏洞复现实战——关注紫灵小姐姐不踩坑】
- 2022-06-23 JVM学习
- MemSQL 的安装和简单使用 比Mysql快30倍的关系型数据库
- 百度打不开,其它网站正常
- 简单计算机基础知识,计算机基础知识讲义
- Cholesky和LU矩阵分解
- springboot项目拦截器重定向循环问题
- 全志v3s学习笔记(1)——基础简介及资料
- JS本地存储和会话存储的区别
- 多线程调试(gdb命令行和使用集成开发qtcreator查看线程状态)
- 项目管理(PMP)》敏捷开发(Agile)