<!-- 模板語法> 
<template>
   <div>{{state}}</div>
</template> 
//js 腳本
setup(){
     let state = ref(10) 
     state.value = 11
     return {state}
}

<!-- 模板語法> 
<template>
   <div>{{state.name}}</div>
</template> 
//js 腳本
setup(){
     let state = reactive({name:'aaa'}}) 
     state.name = 'zhangsan'
     return {state}
}

 var state = shallowReactive({
    a:'a',
    gf:{
       b:'b',
       f:{
          c:'c',
          s:{d:'d'}
       }
    }
 })
 state.a = '1'
 //改變第一層的數(shù)據(jù)會(huì)導(dǎo)致頁面重新渲染
 //state => Proxy {a:"a",gf:{...}}
//如果不改變第一層 只改變其他的數(shù)據(jù) 頁面不會(huì)重新渲染 例如 state.gf.b = 2

var state = shallowRef({
   a:'a',
    gf:{
       b:'b',
       f:{
          c:'c',
          s:{d:'d'}
       }
    }
})
state.value.a = 1
/*
并不能重新渲染，shallowRef的原理也是通過shallowReactive({value:{}})創(chuàng)建的，要修改value才能重新渲染
*/
state.value = {
    a:'1',
    gf:{
       b:'2',
       f:{
          c:'3',
          s:{d:'d'}
       }
    }
}

var state = shallowRef({
   a:'a',
    gf:{
       b:'b',
       f:{
          c:'c',
          s:{d:'d'}
       }
    }
})
state.value.gf.f.s.d = 4
triggerRef(state)

var obj = {name:'test'}
var state = reactive(obj)
var obj2 = toRaw(state)
obj2.name = 'zs'//并不會(huì)引起頁面的渲染

----
//如果是用ref 創(chuàng)建的 就要獲取value值
var obj = {name:'test'}
var state = ref(obj)
var obj2 = toRaw(state.value)

var obj = {name:'test'}
obj = markRaw(obj)
var state = reactive(obj)
state.name = 'zs'//無法修改數(shù)據(jù) 頁面也不會(huì)修改

var obj = {name:'test'}
var state = ref(obj.name)
state.name = 'zs' //此時(shí)obj的name 屬性值并不會(huì)改變，UI會(huì)自動(dòng)更新

///
var obj = {name:'test'}
var state = toRef(obj,'name') //只能設(shè)置一個(gè)屬性值
state.name = 'zs'//此時(shí)obj里面的name屬性值會(huì)發(fā)生改變，但是UI 不會(huì)更新

var obj = {name:'test',age:16}
var state = toRefs(obj)
state.name.value = 'zs'//obj的name的屬性值也會(huì)改變，但UI不會(huì)更新
state.age.value = 18//obj的age的屬性值也會(huì)改變，但UI不會(huì)更新

function myRef(value){
   /*
    customRef函數(shù)返回一個(gè)對(duì)象，對(duì)象里面有2個(gè)方法，get/set方法，創(chuàng)建的對(duì)象獲取數(shù)據(jù)的時(shí)候能 訪問到get方法，創(chuàng)建的對(duì)象修改值的時(shí)候會(huì)觸發(fā)set 方法
    customRef函數(shù)有2個(gè)參數(shù)，track/trigger，track參數(shù)是追蹤的意思，get 的方法里面調(diào)用，可以隨時(shí)追蹤數(shù)據(jù)改變。trigger參數(shù) 是觸發(fā)響應(yīng)的意思，set 方法里面調(diào)用可以更新UI界面
   */
    return customRef((track,trigger)=>{
       return {
          get(){
             track()//追蹤數(shù)據(jù)
             return value     
          },
          set(newVal){
             value = newVal
             trigger()//更新UI界面
          }
       }
    })

}

setup(){
   var age = myRef(18)
   age.value = 20
}

<template>
   <div ref="box"></div>

</template>
import {ref,onMounted} from 'vue'
/*
 setup 方法調(diào)用是在生命周期beforeCreate與created 之間
*/
<script>
   setup(){
      var box = ref(null)
      onMounted(()=>{
         console.log('onMounted',box.value)
      })
      console.log(box.value)
      return {box}

   }

</script>