vue 学习笔记

将项目中常用到的vue知识记录下来

不需要响应式的数据可以不放在data中

vue2中data函数返回的数据，都会通过object.defineProperty递归处理为响应式数据。所以为了节省性能，可以将不需要在模版中展示的数据，不放在data中。

mounted() {
// 可以在方法中全局访问
  this.longList = [];
},
methods: {
  handleClick() {
    console.log(this.longList);
  },
},

父组件可以通过provide将自身的this对象传给子组件

在一些场景中，子组件需要访问父组件的内容，可以通过provide提供自身this对象。

子组件如果通过this.$parent查找，有时因为嵌套较深，不好确认是哪个组件。

// 父组件
 provide() {
  return {
    home: this,
  };
},
data() {
  msg: ''
}

// 子组件
 inject: ['home'],
 // 子组件访问到的父组件数据 都具有响应式
 watch: {
   'home.msg': {
     handler(val) {
        console.log(val)
     }
   }
 },
 mounted() {
   console.log(this.home.msg)
 }

在方法中使用debounce或者throttle

methods: {
  handleResize: debounce(() => {}, 300)
}

清除组件中的定时器或者事件监听

beforeUnmount() {
  clearTimeout(this.timer);
  window.removeEventListener("resize", this.handleResize);
},