vue中的methods,conputed,watcher
todo
1,computed(计算属性) 属性的结果会被缓存, 除非依赖的响应式属性变化才会重新计算, 主要 当做属性来使用;(虽然是个方法,但是当做属性使用)(场景:引用一些经过操作的数据)
computed: {
fullName: function () {
return this.firstName + this.lastName
}
}
1)firstName和lastName任意一个变化都会发生改变,但若都不发生变化,则直接取缓存中的值
2)fullName作为变量直接用在{{}}中,不可与data中的变量名重叠
2,methods(方法)表示一个具体的操作, 主要写 业务逻辑;(场景:方法的调用)
3,watch(监听器)一个对象, 键是需要观测的表达式, 值是对应的回调函数. 主要用来 监听某些特定数据的变化,从而进行某些业务逻辑的操作; 可以看做是computed和methods的结合体;(场景:监听路由地址)
watch: {
firstName: function (val) {
this.fullName = val + ' ' + this.lastName
},
lastName: function (val) {
this.fullName = this.firstName + ' ' + val
}
}
1)简单理解:firstName是data或者computed中的变量,当其变化时会触发相应的函数变化
2)watch的handler,immediate和deep属性 https://www.jianshu.com/p/b70f1668d08f
vue中的methods,conputed,watcher的更多相关文章
- Vue中的三种Watcher
Vue中的三种Watcher Vue可以说存在三种watcher,第一种是在定义data函数时定义数据的render watcher:第二种是computed watcher,是computed函数在 ...
- Vue基础系列(二)——Vue中的methods属性
写在前面的话: 文章是个人学习过程中的总结,为方便以后回头在学习. 文章中会参考官方文档和其他的一些文章,示例均为亲自编写和实践,若有写的不对的地方欢迎大家指出. 作者简介: 一个不知名的前端开发 ...
- Vue中的methods、watch、computed
看到这个标题就知道这篇文章接下来要讲的内容,我们在使用vue的时候methods.watch.computed这三个特性一定经常使用,因为它们是非常的有用,但是没有彻底的理解它们的区别和各自的使用场景 ...
- vue中的methods、computed和watch
1.computed属性: 经过处理返回的数据值,只要源数据没有发生改变,computed函数里面对相应的数据就不会反生改变,相当于缓存在本地;发生改变的时候,computed对应数据的函数才会发生改 ...
- Vue基础系列(四)——Vue中的指令(上)
写在前面的话: 文章是个人学习过程中的总结,为方便以后回头在学习. 文章中会参考官方文档和其他的一些文章,示例均为亲自编写和实践,若有写的不对的地方欢迎大家和我一起交流. VUE基础系列目录 < ...
- Vue基础系列(五)——Vue中的指令(中)
写在前面的话: 文章是个人学习过程中的总结,为方便以后回头在学习. 文章中会参考官方文档和其他的一些文章,示例均为亲自编写和实践,若有写的不对的地方欢迎大家和我一起交流. VUE基础系列目录 < ...
- VUE中常用的十大过滤器
在vue的学习过程中,我发现过滤器是一个很好用的工具,过滤器(Filters)来渲染数据是一种很有趣的方式.过滤器不能替代Vue中的methods.computed或者watch,不改变真正的data ...
- vue系列---理解Vue中的computed,watch,methods的区别及源码实现(六)
_ 阅读目录 一. 理解Vue中的computed用法 二:computed 和 methods的区别? 三:Vue中的watch的用法 四:computed的基本原理及源码实现 回到顶部 一. 理解 ...
- Vue中computed,methods 和watch
Vue中的计算属性和方法属性 1.计算属性 computed 模版中可以使用表达式 <div id="example"> {{ message.split('').re ...
随机推荐
- Java第四周总结报告
本周做了什么? 学习了Java的面向对象知识,包括对类,对象,抽象的理解 下周准备做什么? 学习Java面向对象的有关知识,包括对象与类,继承关系等内容 代码联系时间五个小时,看书四个小时. 本周遇到 ...
- C++中的异常处理(上)
1,C++ 内置了异常处理的语法元素 try ... catch ...: 1,try 语句处理正常代码逻辑: 2,catch 语句处理异常情况: 3,try 语句中的异常由对应的 catch 语句处 ...
- laravel框架之及時更改
public function ajaxxiu(request $request) { $id = $request->post('id'); $fd = $request->post(' ...
- 如何用vue封装一个防用户删除的平铺页面的水印组件
需求 为了防止截图等安全问题,在web项目页面中生成一个平铺全屏的水印 要求水印内容为用户名,水印节点用户不能通过开发者工具等删除 效果 如上图 在body节点下插入水印DOM节点,水印节点覆盖在页面 ...
- 微信小程序的拖拽、缩放和旋转手势
在开发中,有时会遇到像App中的手势那样的效果,下面就仿照App实现了一下. wxml部分: <view class="touch-container"> <vi ...
- Jquery复习(二)之stop()易忘点
jQuery stop() 方法 jQuery stop() 方法用于停止动画或效果,在它们完成之前. stop() 方法适用于所有 jQuery 效果函数,包括滑动.淡入淡出和自定义动画. 语法:$ ...
- centos部署LVS负载均衡直接路由DR模式
环境: 在vm里开三个虚拟机 负载调度器:10.0.3.102 真实服务器1:10.0.3.103 真实服务器2:10.0.3.104 虚拟ip: 10.0.3.99 (用来飘移) 负载调度器上 if ...
- vue-cli常用插件安装教程
1.安装sass npm i sass-loader node-sass --save-dev 2.安装stylus cnpm install stylus --save-dev cnpm insta ...
- 启动angular项目,端口被占用
启动项目,npm start,报如下错误: 解决:1.win+R,输入CMD,启动命令行窗口. 2.输入netstat -ano或者netstat -ano|findstr 8080,查看8080端口 ...
- vue与angular 区别
1.vue的双向数据绑定是基于 Es5中的getter和setter来实现的,而angular而是由自己实现的一套模板编译规则,需要进行 ‘脏’ 检查,vue则不需要,因此,vue性能上更高一些,但是 ...