两分钟带你认识什么是计算属性和侦听器

两分钟带你认识什么是计算属性和侦听器

计算属性

• 1.计算属性作用 ： 解决渲染数据的代码冗余问题

  • 某些数据在渲染的时候，可能要经过一些复杂逻辑的计算处理

• 2.计算属性的语法：在vue实例的computed对象中声明一个函数

  • 这个函数名就是计算属性的属性名
  • 在这个函数中 return 返回值（是计算属性的属性值）

• 3.注意点

  • 这个函数一定要写在vue实例的computed对象中
  • 这个函数一定要有返回值，否则计算属性无法渲染

• 4计算属性注意点：

  • 这个函数一定要写在vue实例的computed对象中
  • 这个函数一定要有返回值，否则计算属性无法渲染

• 5.计算属性特点及原理介绍 :

  • 计算属性本质是一个函数
  • 计算属性的值就是函数的返回值
  • 缓存机制（提高性能）
    （1）计算属性在第一次使用时，会执行一次函数体，之后就会将返回值缓存起来
    （2）下一次使用计算属性的时候，不会执行这个函数，而是直接从缓存中读取
    （3）只有当计算属性中的数据发生变化时，这个函数才会重新执行一次

• 6.计算属性的set与get :

  • 默认值是get只能获取,如果要设置set, 这时计算实行要写成一个对象,

侦听器

​

watch:{
 '要侦听的属性名'(newVal,oldVal){ }
 }
1
2
3

• 侦听器的作用 : 监听某一个数据的变化
• 侦听器与计算很随性的区别 :
  • 计算属性 : 监听多个属性 （只要计算属性内部的任何属性变化，都会执行函数）
  • 侦听器 : 监听单个属性

深度监听

watch: {

​                "要侦听的属性名": {

​                    deep: true, // 深度侦听复杂类型内变化

​                    handler (newVal, oldVal) {}

​                }

​            }
1
2
3
4
5
6
7
8
9
10
11