How does Vue convert data that is not in data to responsiveness

In general, we will unload the data into the data function to achieve the data response, so there is no other way? Now let’s share the vUE native method implementation

//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 : "Increasing number"}</button>
       </div>
     )
   }
 }
</script>

<style lang="scss" scoped>
</style>
Copy the code

When the component is called

<Observer> <span> add </span> </Observer>Copy the code

No matter how much we click on the state.count button, it doesn’t change, because state isn’t written in the data function, so there’s no responsive interception of the data, but when we wrap the data in ue. Observable, it does. Okay

//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 : "Increasing number"}</button>
       </div>
     )
   }
 }
</script>

<style lang="scss" scoped>
</style>
Copy the code

Make a little progress every day. Record a little