Vue2的响应式原理

<template>

<button @click="upA">{{ m }}</button>

<button @click="upB">{{ n }}</button>

</template>

 <script lang='ts' setup>

   import{  ref,reactive  } from 'vue'

   let m= ref(100);

   function upA(){

        m.value=m.value+1;

        console.log(m);

   }

   let n = reactive({name:"tom"});

//2

   function upB(){

        n.name +="#";

        console.log(m);



   }

</script>

<style scoped>

</style>

      重点

 1、直接定义的基本数据类型与对象类型都是非响应式的.

2、基本数据类型使用ref函数变成响应式对象.

3、ref定义的数据在界面上不需要.value，在ts中需要.value操作值.

4、reactive可以定义响应式的对象类型数据.

5、ref也可以包装对象类型的数据，但内部还是使用了reactive.