vue2在Vue的Data中声明非响应式数据

需求背景

总有一些特殊需求场景使得我们在使用vue组件时，需要定义一些非响应式的数据，这在**vue3**中要非常容易的，不使用ref、reactive定义数据即可。而在**vue2**中，因为组件数据定义在 data选项方法中，是被自动响应式的，所以需要一些特殊方法来定义一些可在**vue2**的组件中使用的非响应式数据

方法

方法一：Object.freeze

利用Object的freeze方法，能“冻结”对象属性，从而不受vue监听响应式的setter和getter的影响

export default {
	name: 'UnReactiveDataComponent',
  data () {
     return {
      	unReactiveData: Object.freeze({
  				propA: 'value a',
          propB: 'value b'
        })
     } 
  }
}

方法二：以“_”开头命名变量

其实官方有个文档提到过，使用“_”前缀命名的变量是不会被响应式监听的，例如下面：

<template>
	<div>{{ $data._unReactiveValB }}</div>
</template>
<script>
  export default {
	name: 'UnReactiveDataComponent',
  data () {
     return {
      	_unReactiveValA: 'value a',
        _unReactiveValB: 'value b'
     } 
  },
  methods: {
  	doSomething(){
      // 在组件中使用，需要用 this.$data的方式来引用
  		console.log(this.$data._unReactiveValA)
    }
  }
}
</script>  

方法三：使用方法来动态声明和引用

这是作者我最喜欢使用的一种方式，尤其是需要在vue组件中引入一个Js的类实例，且完全不须要响应式的时候。
原理就是用一个get方法来动态创建并返回变量对象。

<template>
	<button @click="doSomething"></button>
</template>
<script>
  import MyAppContext from '@/lib/MyAppContext'
  export default {
	name: 'UnReactiveDataComponent',
  data () {
     return {
      	_unReactiveValA: 'value a',
        _unReactiveValB: 'value b'
     } 
  },
  methods: {
    _getContenxt() {
      const vm = this
      if (!vm._myAppContext){
        vm._myAppContext = new MyAppContext()
      }
      return vm._myAppContext
    },
  	doSomething(){
      const vm = this
      vm._getContext().run()
    }
  }
}
</script>