Web前端笔记-13、Vue-computed计算属性、watch侦听器、持久化到本地、生命周期、图表echarts

计算属性

基于现有的数据，计算出来的新属性。依赖的数据变化，自动重新计算。

语法：

• 声明在 computed 配置项中，一个计算属性就是一个函数，return结果。
• 使用起来和普通属性一样使用{{计算属性名}}（属性名不能加小括号）

注意：computed具有缓存属性，引用多次但只运行一次。methods只要调用一次就要执行一次

computed1 (){
  return 
}

默认不能更改计算属性的值，如果要改需要使用完整写法。

完整写法：以后只用完整写法

<span>{{ fullName }}</span>

fullName: {
  get(){return } // 相当于简单写法
  set(val){} // 视图直接修改计算属性的结果，set会执行。set形参表示修改后的结果
}

保留两位小数：number.ToFixed(2)

watch侦听器(监视器)

侦听数据。

监视数据变化，执行一些 业务逻辑 或 异步操作。

• 简单写法 - 简单类型数据，直接监视

watch: {
  数据属性名(newValue, oldValue){},
  '对象.属性名' (newValue, oldValue){}
}

完整写法 - 添加额外配置项 以后只写完整写法即可

watch: {
  数据: {
    handler(变化后的值，变化前的值){}, //相当于简单写法的函数
    deep: true, // 深拷贝，加入改配置表示深度侦听，当对象的任意属性改变都能侦听
    immediate: true, //立即侦听，页面刷新马上执行handler，数据可能没变化也执行
  }
}

watch: {
  // q from to 任意一个改变都需要重新翻译，直接侦听obj即可
  // 简单写法无法侦听对象，需要深拷贝，用完整写法
  obj: {
    async handler(newVal) {
      if (val === '') {
        this.result = ''
        return
      }
      // 每次先把定时器删掉，重置定时器
      // 定时器用this.timer定义，data里没this.timer也没关系
      clearTimeout(this.timer)
      this.timer = setTimeout(async () => {
        const { data: res } = await axios({
          url: 'http://www.itcbc.com:3006/api/translate',
          method: 'GET',
          params: newVal,
        })
        this.result = res.trans_result[0].dst
      }, 1000)
    },
    deep: true,
    // immediate: true,
  },
},

持久化到本地

data: {
  // 使用本地持久化数据
  fruitList: JSON.parse(localStorage.getItem('fruitList')) || [
    {},{},{},{} // 默认值
  ]
},

watch: {
  fruitList: {
    deep: true,
    handler (newVal) {
      localStorage.setItem('fruitList', JSON.stringify(newVal))
    }
  }

},

生命周期

什么时候可以发送初始化渲染请求(axios请求)？（越早越好，创建阶段就可以了）什么时候可以开始操作dom？（至少dom得渲染出来。挂载阶段结束就可以）

生命周期四个阶段：创建、挂载、更新、销毁

创建阶段：响应式数据、方法等准备好了。

挂载阶段：渲染模板，即渲染阶段。

更新阶段：修改数据，更新视图。

销毁阶段：销毁实例。

钩子函数：自动执行的函数。和data, metheds, computed, watch平级。

echarts

https://echarts.apache.org/zh/index.html