Vue怎么把不是在data里面的数据转化为响应式

一般的我们会把数据卸载data函数里面，实现数据的响应式，那么除了这个还有没有其他的方式呢？现在咱们就分享下vue 原生的方法实现

//Observer.vue
<script>
  const state = {
   count: 1
 } 
 export default {
   name: 'Observer',
   methods: {
     changeCount () {
       console.log(11)
       state.count += 1
     }
   },
   render (h) {
     console.log(h)
     return (
       <div>
         {state.count}
         <button onclick={this.changeCount}>{this.$slots.default ? this.$slots.default : "递增数字"}</button>
       </div>
     )
   }
 }
</script>

<style lang="scss" scoped>
</style>

组件调用的时候

<Observer>
     <span>增加</span>
</Observer>

此时无论我们怎么点击按钮state.count都不会变化,因为state没有写在数据的data函数里面，所有没有进行数据的响应式拦截 但是当我们用Vue.observable将数据包裹起来的时候，就实现了我们的功能

//Observer.vue
<script>
 import Vue from 'vue';
 const state = Vue.observable({ count: 0 })
 export default {
   name: 'Observer',
   methods: {
     changeCount () {
       console.log(11)
       state.count += 1
     }
   },
   render (h) {
     console.log(h)
     return (
       <div>
         {state.count}
         <button onclick={this.changeCount}>{this.$slots.default ? this.$slots.default : "递增数字"}</button>
       </div>
     )
   }
 }
</script>

<style lang="scss" scoped>
</style>

坚持每天进步一点点，记录一点点，滴水石穿