Vue中需要注意的问题总结

2019-10-17

使用vue的时候经常会遇到一些问题，虽然阅读查阅官方文档，就会发现文档中把一些需要注意的点都提到了。为了深入能对文档的知识点进行理解，通过查阅网上的资料，并通过实例展示以便自己在项目中编写代码能够更有效率。

1、组件中，为什么`data`必须是一个函数

vue中的data为对象，是引用类型，当重用组件时，一个组件对data做更改，那另一个组件也会跟着改，而使用返回一个函数返回数据，则每次返回都是一个新对象，引用地址不用，所以就不会出现问题。

2、`Vue`中`$set`的使用场景

当vue的data里边声明或者已经赋值过的对象或者数组（数组里边的值是对象）时，向对象或数组中添加新的属性，如果更新此属性的值，是不会更新视图的。

根据官方文档定义：如果在实例创建之后添加新的属性到实例上，它不会触发视图更新。

由于vue会在初始化实例时对属性执行getter/setter转化过程，所以属性必须在 data 对象上存在才能让vue转换它，这样才能让它是响应的。

以下是实例：

<template>
  <div>
    <p @click="addd(obj)">{{obj.d}}</p>
    <p @click="adde(obj)"> {{obj.e}}</p>
  </div>
</template>
<script>
  export default {
      data(){
            return {
                obj:{}
            }
      },
      mounted() {
        this.obj = {d: 0};
        this.obj.e = 0;
        console.log('after--', this.obj);
      },
     methods: {
        addd(item) {
            item.d = item.d + 1;
            console.log('item--',item);
        },
        adde(item) {
            item.e = item.e + 1;
            console.log('item--',item);
        }
       }
  }
</scirpt>

从控制台打印出的信息看，对象属性b是有get和set方法的，而新增的对象属性e是没有的。

分别点击触发3次addd和adde，页面效果及控制台打印信息效果如下：

此时再点击触发1次addd，控制台打印信息效果如下：

由此可以看出，更新新增属性e，是不会更新视图，但是会改变其值，当更新原有属性d时会更新视图，同时将新增的属性e的值也更新到视图里边。

这时候可以使用vm.$set实例方法，这也是全局Vue.set方法的别名

mounted() {
    this.obj = { d: 0 };
    this.$set(this.obj,'e',0);
    console.log('after--', this.obj);
}

刷新页面再次分别点击触发3次addd和adde，页面效果及控制台打印信息效果如下：

有时你想向已有对象上添加一些属性，例如使用Object.assign()或_.extend()方法来添加属性。但是，添加到对象上的新属性不会触发更新。在这种情况下可以创建一个新的对象，让它包含原对象的属性和新的属性：

1 2	// 代替 Object.assign(this.obj, { a: 1, e: 2 }) this.obj= Object.assign({}, this.obj, { a: 1, e: 2 })

3、`vue`生命周期详解

vue的生命周期：

beforeCreate：组件实例刚刚被创建,组件属性计算之前,如data属性
created：组件实例创建完成,属性已绑定,但是DOM还未完成,$el属性还不存在
beforeMount：模板编译/挂载之前
mounted：模板编译/挂载之后
beforeUpdate：组件更新之前
updated：组件更新之后
activated：for keep-alive,组件被激活时调用
deactivated：for keep-alive,组件被移除时调用
beforeDestroy：组件销毁前被调用
destoryed：组件销毁后调用

实例代码：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <!-- 开发环境版本，包含了有帮助的命令行警告 -->
    <script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
    <title>Document</title>
</head>
<body>
    <div id="app">{{a}}</div>
    <script>
    var vm = new Vue({
        el: '#app',
        data: {
            a: 'vuejs',
        },
        methods: {
            // get~ 销毁组件
            destroyElement() {
                this.$destroy(true);
                this.$el.parentNode.removeChild(this.$el);
            }
        },
        beforeCreate: function() {
            console.log('创建前');
            console.log(this.a);
            console.log(this.$el);
        },
        created: function() {
            console.log('创建之后');
            console.log(this.a);
            console.log(this.$el);
        },
        beforeMount: function() {
            console.log('mount之前');
            console.log(this.a);
            console.log(this.$el);
        },
        mounted: function() {
            console.log('mount之后');
            console.log(this.a);
            console.log(this.$el);
        },
        beforeUpdate: function() {
            console.log('更新之前');
            console.log(this.a);
            console.log(this.$el);
        },
        updated: function() {
            console.log('更新完成');
            console.log(this.a);
            console.log(this.$el);
        },
        beforeDestroy: function() {
            console.log('组件销毁之前');
            console.log(this.a);
            console.log(this.$el);
        },
        destroyed: function() {
            console.log('组件销毁之后');
            console.log(this.a);
            console.log(this.$el);
        },
    })
    </script>
</body>
</html>

beforeCreated：el和data并未初始化
created：完成data数据的初始化,el没有
beforeMount：完成了el和data初始化
mounted：完成挂载

打开命令行在命令行中输入vm.a = 'change';查看效果：

打开命令行在命令行中输入vm.destroyElement();查看效果：

可以看到页面id为app的节点已经被删除了。

4、生命周期函数/methods/watch里面不应该使用箭头函数

箭头函数的this指向函数所在的所用域，普通函数的this指向函数的调用者

vue中生命周期函数，methods，watch自动绑定this上下文到实例中，因此你可以访问数据，对属性和方法进行运算。这意味着你不能使用箭头函数来定义一个生命周期方法，这是因为箭头函数绑定了父上下文，因此this与你期待的 Vue实例不同

5、methods/computed/watch

methods VS computed

我们可以将同一个函数定义为methods或者computed，用这两种方式，得到的结果是相同的，不同的是computed是基于它们的依赖进行缓存的，计算属性只有在它相关的依赖发生改变时才重新求值

适用场景:

重新计算开销很大的话，选computed；不希望有缓存的选methods

computed VS watch

watch有新旧值两个参数，计算属性没有，但是计算属性可以从setter获得新值

关于computed

对于计算属性要特别说明一点：vue的计算属性computed默认只有getter，需要使用getter的时候需要自己加一个setter

export default {
    data () {
        return {
            firstName: '张',
            lastName: '三',
        };
    },
    computed: {
        fullName() {
              return this.firstName + ' ' + this.lastName
        },
    },
    methods: {
        changeFullName () {
            this.fullName = '李 四';
        }
    },
};
// 其中computed里的代码完整写法是  
computed: {
   fullName: {
        // getter
        get: function () {
          return this.firstName + ' ' + this.lastName
        },
   }    
},

执行changeFullName发现报错[Vue warn]: Computed property "fullame" was assigned to but it has no setter.

我们需要给计算属性fullName添加一个setter

computed: {
   fullName: {
        // getter
        get: function () {
          return this.firstName + ' ' + this.lastName
        },
        // setter
        set: function (newValue) {
          var names = newValue.split(' ')
          this.firstName = names[0]
          this.lastName = names[names.length - 1]
        }
  }    
}

1、组件中，为什么data必须是一个函数

2、Vue中$set的使用场景

3、vue生命周期详解