vue(3.0,双向数据绑定)

  vue2.0

 实现原理 defineProperty()

 vue3.0

 实现原理 defineProperty()： ref  ，  和 Proxy（）:reactive（）

 使用简单的数据例如 字符串，number 可以直接使用   ref

 不过对象和素组也是可以用他会调用reactive进行数据的双向绑定但是不建议

主要原因

reactive 可以监控删除也就是说数组的改动在vue3.0可以监控 vue2.0需要借助方法

 代码

<template>
    4444{{prope.age}}  {{name}}
    <button @click="chengname">更改我的名称</button>
    <HelloWorld  msg="Welcome to Your Vue.js App"/>

</template>

<script>
// @ is an alias to /src
import HelloWorld from '@/components/HelloWorld.vue'
import  {ref,reactive,onMounted} from 'vue'
// import  {ref,reactive,toRefs,computed,onBeforeMount,onMounted,onBeforeUnmount,onUnmounted} from 'vue'
export default {
  name: 'Home',
    components:{
        HelloWorld
    },

    watch:{

      },
  setup(){
        let name =  ref("我的名字")
        let prope = reactive({
          age:20
        })
        let box  = ref(null)
        let chengname = function(){

               name.value = "哈哈哈哈"
              prope.age =  66666
        }
        onMounted(() =>{
              // 方法事件jkdvjdj

          console.log(box,"box")
       })

      return {
          box,
          prope,
          name,
          chengname
      }
      //   let name = ref("ddd")

      // let  xingming  = computed( () =>{
      //            return  name.value
      // })
      //   let chenname = function () {
      //      console.log("出发了")
      //            name.value= name.value+"1"
      //   }
      //
      //   //卸载后
      //   onUnmounted( () => {
      //       document.removeEventListener('mousemove')
      //   })
      //   //挂载后
      //   onMounted(() =>{
      //         document.addEventListener('mousemove',()=>{
      //              console.log("move")
      //
      //       })
      //   })
      //   //挂在后
      //   onBeforeUnmount( (
      //
      //   ) =>{})
      //
      //   onBeforeMount(()=>{})
      //   return {
      //        name,
      //       chenname,
      //       prope,
      //       xingming,
      //       ...(toRefs(prope))
      //
      //  };
  }
  // components: {
  //   HelloWorld
  // }
}
</script>
<style>
.home{
    height: 100%;
    width: 100%;

}
</style>

步骤

1导入 import  {ref,reactive,onMounted} from 'vue'

2 声名  

let name =  ref("我的名字")
           let prope = reactive({
          age:20
        })

3 更改 ref 更改需要.value 不然无法更改