在Vue中有时候需要获取数据的原始值，它是开发中常用的方法，也是面试问题之一。

通过this.$options.data().xxx 获取原始值
通过this.$data.xxx 或者 this.xxx 获取新的值

举例说明

<html>
   <head>
      <title>Vue获取数据的初始值</title>
      <script src="https://cdnjs.cloudflare.com/ajax/libs/vue/2.6.0/vue.min.js">
      </script>
   </head>
   <body>
      <div id = "intro" style = "text-align:center;">
         <p>修改后的值：{{ count }}</p>
		 <button @click="getCount">获取count</button>
      </div>
      <script type = "text/javascript">
         var vue_det = new Vue({
            el: '#intro',
			data() {
				return {
				  count: 1
				}
			},//注意这里的写法是函数式，不是对象 data:{count:1}
			mounted: function(){
				this.count = this.count+10
			},
			methods:{			  
			  getCount(){
			    console.log("原始值："+this.$options.data().count)
				console.log("新的值："+this.$data.count)
				
			  }
			},
			
         });
      </script>
   </body>
</html>

测试一下

点击获取count，输出如下：

Vue获取数据的原始值

在上面的例子中有一点需要注意的是data的写法是函数式data() {return {count: 1}}，不是对象 data:{count:1}，否咋会造成this.$options.data().count获取不到原始值。