Vue之计算属性Computed和属性监听Watch，Computed和Watch的区别
一、 计算属性（computed）
1.计算属性是为了模板中的表达式简洁，易维护，符合用于简单运算的设计初衷。
例如：
<div id="app">
{{ myname.substring(0,1).toUpperCase() + myname.substring(1) }}
</div>
运算过于复杂，冗长，且不好维护，因此我们对于复杂的运算应该 使用计算属性的方式去书写。
因此可改写为：
<body>
<div id="app">
{{ changewords }} // 渲染 不用写()
</div>
</body>
<script>
var vm = new Vue({
el: "#app",
data:{},
// 计算属性
computed:{
changewords(){
return this.myname.substring(0,1).toUpperCase() + this.myname.substring(1)
}
}
})
</script>
总结：
1.变量不在 data中定义，而是定义在computed中，写法跟写方法一样，有返回值。函数名直接在页面模板中渲染，不加小括号 。
2.根据传入的变量的变化 进行结果的更新。
3.计算属性基于响应式依赖进行缓存。如其中的任意一个值未发生变化，它调用的就是上一次 计算缓存的数据，因此提高了程序的性能。而methods中每调用一次就会重新计算 一次，为了进行不必要的资源消耗，选择用计算属性。
计算属性模糊查询的例子：
<body>
<div id="app">
<input type="text" v-model="mytext">
<ul>
<li v-for="data in datalistcom" :key="data">
{{ data }}
</li>
</ul>
</div>
</body>
<script>
var vm = new Vue({
el: "#app",
data:{
datalist:["aaa","bbb","ccc","ddd","aa","a","cc","dd"],
mytext:''
},
computed:{
datalistcom(){
return this.datalist.filter(item=>item.indexOf(this.mytext)>-1)
}
}
})
</script>
二、监听属性（watch）
上面说到计算属性的时候 初始化的时候就可以被监听到并且计算 但是watch是发生改变的时候才会触发。
当你有一些数据需要随着其它数据变动而变动时，或者当需要在数据变化时执行异步或开销较大的操作时，你可以使用 watch。
例子 ：
<body>
<div id="app">
<p>单价：<input type="text" v-model="price"></p>
<p>数量：<input type="text" v-model="number"></p>
<p>计算金额：{{sum}}</p>
</div>
</body>
<script>
var vm = new Vue({
el:"#app",
data:{
price:100,
number:1,
sum:0
},
//监听某一个值或者状态发生变化 变化就会触发watch
watch:{
// 监听的参数的名字要一致
price(){
console.log(this.price)
if(this.price*this.number < 1000 && this.price*this.number > 0){
this.sum = this.price*this.number + 100
}else{
this.sum = this.price*this.number
}
},
number(){
console.log(this.price)
if(this.price*this.number < 1000 && this.price*this.number > 0){
this.sum = this.price*this.number + 100
}else{
this.sum = this.price*this.number
}
}
}
})
</script>
计算属性 和属性监听的区别：
1.计算属性变量在computed中定义，属性监听在data中定义。
2.计算属性是声明式的描述一个值依赖了其他值，依赖的值改变后重新计算结果更新DOM。属性监听的是定义的变量，当定义的值发生变化时，执行相对应的函数。
Vue之计算属性Computed和属性监听Watch，Computed和Watch的区别的更多相关文章
- 监听配置问题，SID与Service_Name区别
监听配置问题,SID与Service_Name区别 1.数据库实例名SID 概念:数据库实例名用于和操作系统进行联系的标识,是数据库和操作系统之间的交互用的书数据库实例名.实例名也被写入参数文件中,该 ...
- vue中的computed（计算属性）和watch(监听属性)的特点，以及深度监听
//计算属性是根据data中已有的属性,计算得到一个新的属性, <div>全名:{{fullName}}</div> 创建计算属性通过computed关键字,它是一个对象 计算 ...
- Vue中计算属性（computed）和监听属性函数watch的比较
1.计算属性适用的情形我们可能会有这样的需求,一个数据属性在它所依赖的属性发生变化时,也要发生变化,这种情况下,我们最好使用计算属性.例如在下面这个例子中,如果我们使用监听函数,代码就会变得有点冗余. ...
- vue data中的对象的属性如何使用watch监听
在写项目的时候遇到了一个问题,就是需要动态监听data中一个对象的属性的变化.遇到了许多坑,在此过程中也发现了两种解决方案. 一.通过deep属性实现 data() { return { parent ...
- vue学习-day05 -- 案例：名字合并(监听data数据的改变)
1.案例:名字合并(监听data数据的改变) 使用keyup事件监听data数据的改变 <!DOCTYPE html> <html> <head> <titl ...
- watch实现监听Vuex状态监听(利用computed)
Vuex 通过 store 选项,提供了一种机制将状态从根组件"注入"到每一个子组件中(需调用 Vue.use(Vuex)):通过在根实例中注册 store 选项,该 store ...
- vue教程2-08 自定义键盘信息、监听数据变化vm.$watch
vue教程2-08 自定义键盘信息 @keydown.up @keydown.enter @keydown.a/b/c.... 自定义键盘信息: Vue.directive('on').keyCode ...
- vue 路由缓存 路由嵌套 路由守卫 监听物理返回
最近开发vue项目,遇到的一些问题,这里整合一下,看到一些博客已经有写相关知识,然后自己再次记录一下. 这是关于vue路由相关比较常见的问题,以后遇到相关路由的问题,会不断更新这篇博客. 需求1:从填 ...
- 小程序的数据监听 用法和vue中的watch一样====使用通配符监听所有自数据字段的变化
使用通配符监听所有自数据字段的变化
- 计算属性和监听，computed,watch
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8&quo ...
随机推荐
- 自定义BeanDefinitionRegistryPostProcessor
自定义BeanDefinitionRegistryPostProcessor 概述 BeanDefinitionRegistryPostProcessor继承自BeanFactoryPostProce ...
- python接口自动化测试 - 数据驱动DDT模块的简单使用
DDT简单介绍 名称:Data-Driven Tests,数据驱动测试 作用:由外部数据集合来驱动测试用例的执行 核心的思想:数据和测试代码分离 应用场景:一组外部数据来执行相同的操作 优点:当测试数 ...
- 曹工说Spring Boot源码（14）-- AspectJ的Load-Time-Weaving的两种实现方式细细讲解，以及怎么和Spring Instrumentation集成
写在前面的话 相关背景及资源: 曹工说Spring Boot源码(1)-- Bean Definition到底是什么,附spring思维导图分享 曹工说Spring Boot源码(2)-- Bean ...
- ROS中３D机器人建模(一)
一,机器人建模的ROS软件包 *urdf : 机器人建模最重要的ros软件包是urdf软件包.这个软件包包含一个用于统一机器人描述格式(URDF)的C++解析器,它是一个表示机器人模型的XML文件,还 ...
- 05讲基础篇：某个应用的CPU使用率居然达到100%，我该怎么办
小结 CPU 使用率是最直观和最常用的系统性能指标,更是我们在排查性能问题时,通常会关注的第一个指标.所以我们更要熟悉它的含义,尤其要弄清楚用户(%user).Nice(%nice).系统(%syst ...
- java-zhisji
1. int indexOf(int ch):用来检查给定的一个字符在当前字符串中第一次出现的下标位置.这里的下标和数组的下标意思相近,0表示该字符串的第1个字符,以此类推.当该字符串中并不 ...
- vs2012 编译 zlib 1.2.8
1. 下载 http://zlib.net/zlib-1.2.8.tar.gz 2. 编译 - 解压到目录,如d:\library - 开启VS2012的Command Pro ...
- 关于RiscV的一些资料整理
1. 基于RISC-V架构的开源处理器及SoC研究综述 https://mp.weixin.qq.com/s/qSD-q8y0_MY8R0MBA85ZZg 原文链接: https://blog.csd ...
- session学习总结【session原理、应用、与cookie区别】
session原理 session也是一种记录浏览器状态的机制,但与cookie不同的是,session是保存在服务器中. 由于http是无状态协议,当服务器存储了多个用户的session数据时,如何 ...
- 怎么理解Laravel的核心架构
使用过larave框架的朋友都知道laravel框架里面除了提供一些基本的功能(如控制器.视图.模型)之外,还有中间件.门面.契约等,这些东西是如何在laravel框架运用起来的呢?今天就和大家详聊一 ...