vue第三天:计算属性 监听器 生命周期 v-if和v-show区别

346 阅读2分钟

一:计算属性

conputed计算属性: 使用

  • 计算属性在定义的时候 要定义成“方法格式” 方法的调用{{str}}
  • 计算属性是具有缓存性的,当计算第一次结果后会存入缓存,第二次调用该计算属性的时候,
  • 他会先读取需要返回的结果是否发生改变
  • 如果没有就直接返回缓存的结果,如果改变了才会从新计算,
  • methods:方法在依赖的值(data中的key的值)改变后,只有设置触发才会重新执行methods相关的方法 方法调用是{{str()}} image.png image.png

image.png

二:watch监听器

  • handle 回调函数 监听到变化时候执行的函数 -deep:布尔值 是否深入监听 数组或是对象的值变化才可以监听到 -immediate:布尔值 确认是否一进入页面就监听 然后执行里面的handle方法

  • 所有的侦听器都必须定义到watch节点下。 

  • 侦听器本质是个函数,要监听那个数据,就把它作为方法名,只要它发生了变化就会触发这个函数

  • 注意传参时,新值在前,旧值在后。

image.png

image.png

image.png

image.png

三:Vue的生命周期八大钩子函数

  • this.$destroyed()销毁方法
  • beforDestroy和destroyed使用场景:销毁定时器内存的时候两个方法里面写都是可以的

image.png

image.png

image.png

案列:时间补位销毁定时器

image.png image.png

四:v-if和v-show区别

  • v-if v-show控制dom的显示和隐藏
  • 两个都是可以通过falg=true 显示和隐藏
  • 区别是:v-if 每次都是会动态的删除和添加样式 实际开发此方法常用
  • v-show每次是隐藏或显示 清除的是display这个属性 频繁切换使用此方法

五 v-for和v-if一起使用 但是不建议 如果使用

image.png