1、计算属性

详细的内容可跳转至vue 计算属性
可以使用计算属性来代替在表达式中进行的复杂运算，以便于能够更方便的维护与复用逻辑。

计算属性是在选项对象中使用 computed 字段来定义。

特点：计算属性是可被缓存的（计算属性是基于它的响应式依赖进行缓存的，只有当依赖项发生变化时，才会重新计算并缓存）

  <!-- 特点：计算属性是可被缓存的（计算属性是基于它的响应式依赖进行缓存的，只有当依赖项发生变化时，才会重新计算并缓存） --><div id="app">{{ message }} <br>{{ message.split('').reverse().join('') }} <br><!-- 上面调用很多次  {{ reversedMessage }}，页面上能显示很多次，函数体只执行一次即看到的效果是控制台只显示一次计算 reversedMessage...，计算属性是有缓存的 -->{{ reversedMessage }} <br>{{ reversedMessage }} <br>{{ reversedMessage }} <br>{{ reversedMessage }} <br>{{ reversedMessage }} <br>{{ reversedMessage }} <br>{{ reversedMessage }} <br>属性：{{ reversedMsg }} <br>属性：{{ reversedMsg }} <br>属性：{{ reversedMsg }} <br><!-- 方法中调用，必须加上括号！方法每调用一次，执行一次（即控制台打印多次方法->  console.log('方法')） -->方法：{{ reversed() }} <br>方法：{{ reversed() }} <br>方法：{{ reversed() }} <br>方法：{{ reversed() }} <br>方法：{{ reversed() }} <br></div><script src="./libs/vue.js"></script><script>const vm = new Vue({el: '#app', // Viewdata: { // Modelmessage: 'Hello Vue.js'},computed: {// 计算属性的简写形式，相当于是计算属性的 getter 方法定义（不用set方法）reversedMessage() {console.log('计算 reversedMessage...')return this.message.split('').reverse().join('') //.split('')字符串分隔，返回一个数组。.reverse()数组反转（即头尾调换）。.join('')字符串拼接},// 以下是计算属性完整写法reversedMsg: {get() { // getter，用于获取属性值，比如：console.log(this.reversedMsg)console.log('计算 reversedMsg...')return this.message.split('').reverse().join('')},// set的传参val就是传的属性值，即abcset(val) { // setter，用于设置（修改）属性值，this.reversedMsg = 'abc' console.log('为 reversedMsg 赋值:', val)},}},//  也可以在方法中写methods: {reversed() {console.log('方法')return this.message.split('').reverse().join('')}}})</script>

计算属性 VS 方法

计算属性有缓存，方法没有缓存
方法中可包含如网络请求类似的副作用操作，计算属性中没有

2、侦听属性

可跳转至vue侦听器查看详细内容哦

一种更通用的方式来观察和响应 Vue 实例上的数据变动。

当需要在数据变化时执行异步或开销较大的操作时，这个方式是最有用的。

侦听属性是在选项对象中使用 watch 字段来定义。

 <div id="app">{{ message }}</div><script src="./libs/vue.js"></script><script>const vm = new Vue({el: '#app', // Viewdata: { // Modelmessage: 'Hello Vue.js',info: 'infomation',// info: {name: 'infomation', address: { xx: {} }},},watch: {// 简写，相当于 handler 处理器message(newVal, oldVal) {// 即例如在控制台vm.message='你好'，控制台会输出以下内容console.log('message 变化了...，修改后：', newVal, '，修改前：', oldVal)},// 侦听器完整写法info: {handler(newVal, oldVal) { //  handler处理器// 即例如在控制台vm.info='哈哈哈'，控制台会输出以下内容console.log('info 变化了...', newVal, oldVal)},//   immediate: true, // 立即执行(初始渲染时，就执行一个侦听器)// 如果是这种复杂关系，即可以深度监听，info: {name: 'infomation', address: { xx: {} }}//   deep: true, // 深度监听}},})</script>

计算属性 VS 侦听属性

计算属性有缓存，侦听属性没有缓存。
计算属性是由一个或多个依赖项计算返回一个值，而侦听器是侦听一个数据的变化引起其它操作或一到多个数据变化

面试题！vue中的计算属性、方法、侦听属性相关推荐

oclick vue 传参函数_详解Vue计算属性和侦听属性
关注[搜狐技术产品]公众号,第一时间获取技术干货作者介绍: 本期特邀作者:浪里行舟 Github博客2600 star作者,专注于前端领域.个人公众号:「前端工匠」,致力于打造适合初中级工程师能够快 ...
Vue的计算属性、侦听属性与过滤器解析
文章目录知识点计算属性计算属性的基本使用计算属性的 setter 和 getter 侦听属性计算属性与侦听属性对比过滤器过滤器使用方法过滤器应用场景综合小练习知识点计算属性计算 ...
vue --- 过滤器、计算、方法、观察属性
过滤器属性:filters: <div id = "app">{{num}}<br>{{num | toInt}}<br>{{num | toF ...
5.Vue 计算属性和侦听器
Hello,我是 Alex 007,一个热爱计算机编程和硬件设计的小白,为啥是007呢?因为叫 Alex 的人太多了,再加上每天007的生活,Alex 007就诞生了. 5.Vue 计算属性和侦听器 ...
Vue.js 计算属性和侦听器
计算属性和侦听器计算属性模板内的表达式非常便利,但是设计它们的初衷是用于简单运算的.在模板中放入太多的逻辑会让模板过重且难以维护.例如: <div id="example" ...
光脚丫思考Vue3与实战：第05章计算属性和侦听器第02节侦听器
下面是本文的屏幕录像的在线视频: 温馨提示: 1.视频下载:线上视频被压缩处理,可以下载高清版本: 链接:https://pan.baidu.com/s/1qUekWio3fpWToT9PiECpEg ...
vue监听字符串长度_vue中的计算属性和侦听器
计算属性概念模板内的候通现端数是制这.效合应近环大过这业据的表达式非常便利,但是设计它们的初衷是用于简单运算的.在模板中放入太多的逻辑会让模板过重且难以维护在重说道.础过学开概码数项遍间里哦行览屏屏 ...
Vue 过滤器、计算属性、侦听器图解版一目了然
文章目录本篇学习目标 1. vue基础 1.0_vue基础 v-for更新监测 1.1_vue基础_v-for就地更新 1.2_vue基础_虚拟dom 1.3_vue基础_diff算法情况1: 根 ...
vue修改计算属性的值_Vue语法高级之计算属性和侦听器
计算属性和侦听器都可以监听到data区数据的变化,当数据变化时可以触发方法的调用,从而在方法内部可以进行相应的逻辑处理. 计算属性的语法格式是:computed: {} 侦听器的语法格式是:watch ...

面试题！vue中的计算属性、方法、侦听属性

1、计算属性

2、侦听属性

面试题！vue中的计算属性、方法、侦听属性相关推荐

最新文章

热门文章