vue3 数据定义方式 reactive系列详解

    // 上一篇主要写了关于父子组件传值
    // setup的定义方式 ，这一篇主要讲解定义数据的方式
    // reactive, ref 这两个不在陈述,定义格式请看上篇
    
    // readonly  定义一个只读的**对象**， 也只接受对象 
    // 这类似Obj.freeze() 来冻结数据
    <template>
		  <div>
		    <div>{
    
    {
    
     data.count }}</div>
		    <button @click="modifyRead">尝试修改readonly</button>
		    <hr/>
		     <div v-for="(item,index) in testData " :key="index">{
    
    {
    
    item}}</div>
   			 <hr/>
		    <div>{
    
    {
    
    foot.name}}</div>
		    <button @click="modifyRaw">尝试修改markRaw</button>
		    <hr/>
		    <div>{
    
    {
    
    state.count}}</div>
		    <div>{
    
    {
    
    state.next.data}}</div>
		    <button @click="modifyState">尝试修改state</button>
		    <hr/>
		    <div>{
    
    {
    
    state2.foo}}</div>
		    <div>{
    
    {
    
    state2.nested.bar}}</div>
		    <button @click="modifyState2">尝试修改state2</button>
		</div>
	</template>

	<script setup>
	  import {
    
    isReactive, markRaw, reactive, readonly} from "vue";
	  // readonly 只接收一个对象
	  let data = readonly(
	      {
    
    
	        count: 55
	      }
	  )
	  // 编译器爆红,这里函数表达式和普通的函数都可以的
	  let modifyRead = ()=>{
    
    
	    data.count = 33;
	  }
    --------------------------------分割---------------------------------------------
	  // isReactive 检查对象是否是由 reactive 创建的响应式代理。
	    let  testData = reactive([1,2,3,5]);
	    console.log(isReactive(testData))     //true
	
	--------------------------------分割---------------------------------------------
	// markRaw 标记一个对象，使其永远不会转换为 proxy
	 const foot = markRaw( {
    
    
	        name:'gq',
	        age:33
	  })

    function  modifyRaw(){
    
    
         foot.name ='小娃子'
         console.log(foot)    // 这里的值确实更改了， 但是界面没有更新，因为不是proxy代理的
    }
     console.log(isReactive(foot))   //false
   --------------------------------分割---------------------------------------------
	const   state =  shallowReactive({
    
    
        count:1,
        next:{
    
    
           data:66
        }
    })
    // 注意shallowReactive 这个 ,如果你先修改，第一层的数据,那么，next的数据也可以proxy，
    // 但是直接修改 第二层,那么不可以
      function modifyState(){
    
    
      //这个时候可以
      /*  state.count++
        state.next.data ++*/

       // 不行
        state.next.data++;
      }
	--------------------------------分割---------------------------------------------
	//shallowReadonly, 一点不许改变
      const  state2 = shallowReadonly({
    
    
        foo: 1,
        nested: {
    
    
          bar: 2
        }
      })
    // 编译器爆红
    function  modifyState2(){
    
    
      state2.foo = 2;
      state2.nested.bar = 55;
    }
	--------------------------------分割---------------------------------------------
	 // 对于为啥出现可定义非响应的数据，当渲染一组超大不需改变的列表，因为本身不需要改变，
	// 那么我们就不必要，要让数据变成响应的。因为数据的proxy也消耗性能。
	</script>