Vue —— 基础(二)(计算属性、监听属性)

简介: Vue —— 基础(二)(计算属性、监听属性)

一、计算属性

1. 姓名案例 —— 插值语法实现
  <div id="root">
        <input type="text" v-model="firstName">
        <input type="text" v-model="lastName">
        {{firstName}}{{lastName}}
    </div>
  const vm = new Vue({
        el: '#root',  
        data: {     
            firstName: '张',
            lastName: '三'
        }
    })

f1d765fd9fde47bd97fd840154e2a532.png

2. 姓名案例 —— methods实现
  <div id="root">
        <input type="text" v-model="firstName">
        <input type="text" v-model="lastName">
        全名:{{fullName()}}
    </div>
  const vm = new Vue({
        el: '#root',  
        data: {     
            firstName: '张',
            lastName: '三'
        },
        methods:{
            fullName(){
                return this.firstName + this.lastName
            }
        }
    })

ac4d32e152d742c3be55dd291e562247.png

3. 姓名案例 —— 计算属性实现
  1. 什么是计算属性?

要用的属性不存在,要通过已有属性计算得来。


原理是什么?

底层借助了 Object.defineproperty 方法提供 getter 和 setter。


get 什么时候执行?

初次读取时会执行一次。

当依赖的数据发生改变时会被再次调用。


有什么优势?

与 methods 实现相比,内部有缓存机制(复用),效率更高,调试方便。


注意点:

计算属性最终会出现在 vm 上,直接读取使用即可。

如果计算属性要被修改,那必须写 set函数 去响应修改,且要引起计算时依赖的数据发生改变。

  <div id="root">
        <input type="text" v-model="firstName">
        <input type="text" v-model="lastName">
        全名:{{fullName}}
    </div>
  const vm = new Vue({
        el: '#root',  
        data: {     
            firstName: '张',
            lastName: '三'
        },
        computed: {
            fullName: {
                get(){
                    return this.firstName + this.lastName
                },
                set(value){
                    console.log('set被调用了', value);
                    const arr = value.split('-') //把输入的姓名以-为表示分隔开 (比如:李-四)
                    this.firstName = arr[0] //李
                    this.lastName = arr[1] //四
                }
            }
        }
    })

de9c06b07e154f60aa967518932999ad.png

7b762330d11f4ca4a02b3be3649aa302.png

4. 姓名案例 —— 计算属性实现(简写方式)

当不用 set 时可以简写。

  <div id="root">
        <input type="text" v-model="firstName">
        <input type="text" v-model="lastName">
        全名:{{fullName}}
    </div>
  const vm = new Vue({
        el: '#root',  
        data: {     
            firstName: '张',
            lastName: '三'
        },
        computed: {
            fullName(){
                return this.firstName + this.lastName
            }
        }
    })

二、监听属性

1. 天气案例(计算属性实现)
  1. 利用 methods 里面的方法来控制 isHot 的布尔值。
  2. 利用计算属性,以 isHot 的布尔值为标准,写三元表达式来改变天气。
  <div id="root">
        <h1>今天天气很{{info}}</h1>
        <button @click="changeWeather">点击切换</button>
    </div>
  const vm = new Vue({
        el: '#root',  
        data: {     
            isHot: true
        },
        methods:{
            changeWeather(){
                this.isHot = !this.isHot
            }
        },
        computed: { 
            info(){
                return this.isHot ? '炎热' : '凉爽'
            }
        }
    })
2. 天气案例(监视属性实现)

当被监视的属性变化时,回调函数自动调用,进行相关操作。

监视的属性必须存在,才能进行监视。

监视的两种写法:

(1). new Vue时传入watch配置

(2). 通过vm.$watch监视

immediate:该值默认是 false,在进入页面时,第一次绑定值,不会立刻执行监听,只有数据发生改变才会执行 handler 中的操作。

handler:是 watch 中需要具体执行的方法。

  <div id="root">
        <h1>今天天气很{{info}}</h1>
        <button @click="changeWeather">点击切换天气</button>
    </div>
  const vm = new Vue({
      el: '#root',
      data: function () {
          return {
              isHot: true
          }
      },
      methods: {
          changeWeather() {
              this.isHot = !this.isHot
          }
      },
      computed: {
          info() {
              return this.isHot ? '炎热' : '凉爽'
          }
      },
      watch: {
          isHot: {
              immediate: true, //首次加载时调用
              handler(newValue, oldValue) {
                  console.log('天气被修改了', newValue, oldValue)
              }
          }
      }
  })

9ad3f2ebc43947a990eb7282ea50332e.png

3. 深度监视(deep)

deep:需要监听的数据的深度,一般用来监听对象中某个属性的变化,数组字符串一般不需要。

  <div id="root">
        <h2>a 的值是:{{numbers.a}}</h2>
        <button @click="numbers.a++">点我 a+1</button>
        <h2>b 的值是:{{numbers.b}}</h2>
        <button @click="numbers.b++">点我 b+1</button>
    </div>
  const vm = new Vue({
        el: '#root',
        data: function () {
            return {
                numbers: {
                    a: 0,
                    b: 0
                }
            }
        },
        watch: {
            numbers:{
                deep: true,
                handler(){
                    console.log('number改变了')
                }
            }
        }
    })

753b564f60414294a1953ef5f5afe1eb.png

4. 天气案例(监视属性简写)

简写方式

  <div id="root">
        <h1>今天天气很{{info}}</h1>
        <button @click="changeWeather">点击切换天气</button>
    </div>
  const vm = new Vue({
      el: '#root',
      data: function () {
          return {
              isHot: true
          }
      },
      methods: {
          changeWeather() {
              this.isHot = !this.isHot
          }
      },
      computed: {
          info() {
              return this.isHot ? '炎热' : '凉爽'
          }
      },
      watch: {
          isHot(newValue, oldValue){
              console.log('isHot被修改了', newValue, oldValue)
          }
      }
  })
5. 姓名案例(watch监听实现)

computed 和 watch 之间的区别:

  1. computed 能完成的功能,watch 都可以完成。
  2. watch 能完成的功能,computed 不一定能完成,例如:watch可以进行异步操作。

两个注意点:

所有被 Vue 管理的函数,最好写成普通函数,这样this的指向才是 vm 或 组件实例对象。

所有不被 Vue 所管理的函数 ( 定时器的回调函数、ajax的回调函数等 ),最好写成箭头函数,这样 this 的指向才是 vm 或 组件实例对象。

实例:使用 watch 开启异步任务(延迟效果):第一个文本框输入的内容,会延迟 1s 呈现在页面,第二个文本框输入的内容,立即呈现。

  <div id="root">
        姓:<input type="text" v-model="firstName"><br />
        名:<input type="text" v-model="lastName"><br />
        全名:<span>{{fullName}}</span>
    </div>
  const vm = new Vue({
        el: '#root',
        data: {
            firstName: '张',
            lastName: '三',
            fullName: '张-三'
        },
        watch: { //watch内可以开启异步任务(如延迟显示),而computed中不可以(因为计算属性中要的就是返回值)
            firstName(val) {
                setTimeout(() => {
                    this.fullName = val + '-' + this.lastName
                }, 1000)
            },
            lastName(val) {
                setTimeout(() => {
                    this.fullName = this.firstName + '-' + val
                })
            },
        }
    })

070fb4ef2e08442d8d03d1ebc63d8b6b.png

不积跬步无以至千里 不积小流无以成江海


相关文章
|
19天前
|
监控 JavaScript 开发者
在 Vue 中,子组件为何不可以修改父组件传递的 Prop,如果修改了,Vue 是如何监控到属性的修改并给出警告的
在 Vue 中,子组件不能直接修改父组件传递的 Prop,以确保数据流的单向性和可预测性。如果子组件尝试修改 Prop,Vue 会通过响应式系统检测到这一变化,并在控制台发出警告,提示开发者避免这种操作。
|
22天前
|
JavaScript 前端开发 开发者
VUE学习一:初识VUE、指令、动态绑定、计算属性
这篇文章主要介绍了Vue.js的基础知识,包括初识Vue、指令如v-for、v-on的使用、动态属性绑定(v-bind)、计算属性等概念与实践示例。
50 1
|
17天前
|
缓存 JavaScript Serverless
vue中computed计算属性、watch侦听器、methods方法的区别以及用法
vue中computed计算属性、watch侦听器、methods方法的区别以及用法
71 0
|
25天前
|
缓存 JavaScript 前端开发
深入理解Vue.js中的计算属性与侦听属性
【10月更文挑战第5天】深入理解Vue.js中的计算属性与侦听属性
16 0
|
6天前
|
数据采集 监控 JavaScript
在 Vue 项目中使用预渲染技术
【10月更文挑战第23天】在 Vue 项目中使用预渲染技术是提升 SEO 效果的有效途径之一。通过选择合适的预渲染工具,正确配置和运行预渲染操作,结合其他 SEO 策略,可以实现更好的搜索引擎优化效果。同时,需要不断地监控和优化预渲染效果,以适应不断变化的搜索引擎环境和用户需求。
|
6天前
|
缓存 JavaScript 搜索推荐
Vue SSR(服务端渲染)预渲染的工作原理
【10月更文挑战第23天】Vue SSR 预渲染通过一系列复杂的步骤和机制,实现了在服务器端生成静态 HTML 页面的目标。它为提升 Vue 应用的性能、SEO 效果以及用户体验提供了有力的支持。随着技术的不断发展,Vue SSR 预渲染技术也将不断完善和创新,以适应不断变化的互联网环境和用户需求。
24 9
|
5天前
|
缓存 JavaScript UED
Vue 中实现组件的懒加载
【10月更文挑战第23天】组件的懒加载是 Vue 应用中提高性能的重要手段之一。通过合理运用动态导入、路由配置等方式,可以实现组件的按需加载,减少资源浪费,提高应用的响应速度和用户体验。在实际应用中,需要根据具体情况选择合适的懒加载方式,并结合性能优化的其他措施,以打造更高效、更优质的 Vue 应用。
|
4天前
|
JavaScript
如何在 Vue 中使用具名插槽
【10月更文挑战第25天】通过使用具名插槽,你可以更好地组织和定制组件的模板结构,使组件更具灵活性和可复用性。同时,具名插槽也有助于提高代码的可读性和可维护性。
10 2
|
4天前
|
JavaScript
Vue 中的插槽
【10月更文挑战第25天】插槽的使用可以大大提高组件的复用性和灵活性,使你能够根据具体需求在组件中插入不同的内容,同时保持组件的结构和样式的一致性。
10 2
|
4天前
|
前端开发 JavaScript 容器
在 vite+vue 中使用@originjs/vite-plugin-federation 模块联邦
【10月更文挑战第25天】模块联邦是一种强大的技术,它允许将不同的微前端模块组合在一起,形成一个统一的应用。在 vite+vue 项目中,使用@originjs/vite-plugin-federation 模块联邦可以实现高效的模块共享和组合。通过本文的介绍,相信你已经了解了如何在 vite+vue 项目中使用@originjs/vite-plugin-federation 模块联邦,包括安装、配置和使用等方面。在实际开发中,你可以根据自己的需求和项目的特点,灵活地使用模块联邦,提高项目的可维护性和扩展性。