new

v3_project/10_toRefs/App.vue

@@ -0,0 +1,57 @@
+<template>
+  <h2>toRefs</h2>
+  <!-- <h3>name: {{ state2.name }}</h3>
+  <h3>age: {{ state2.age }}</h3> -->
+
+  <h3>name: {{ name }}</h3>
+  <h3>age: {{ age }}</h3>
+
+  <h3>name2: {{ name2 }}</h3>
+  <h3>age2: {{ age2 }}</h3>
+</template>
+
+<script lang="ts">
+import { defineComponent, reactive, toRef, toRefs } from "vue";
+function useFeature() {
+  const state = reactive({
+    name2: "xiaoming",
+    age2: 18,
+  });
+  return {
+    ...toRefs(state)
+  }
+}
+export default defineComponent({
+  //toRefs 把一个响应式对象转化成普通对象  该普通对象的每个 property都是一个ref
+  setup() {
+    const state = reactive({
+      name: "xiaoming",
+      age: 18,
+    });
+    const state2 = toRefs(state)
+    console.log(state)
+    console.log(state2)
+    const { name, age } = toRefs(state);
+    //解决： 利用toRefs可以将一个响应式reactive 对象的所有原始属性转化为ref属性
+    //应用： 当从而成函数返回响应式对象时，可以在不丢失响应式的情况下对返回的对象进行分解使用
+    const {name2,age2} = useFeature()
+    setInterval(() => {
+      // state.name += '='
+      // state2.name.value += '!'
+      name.value += "!!!!";
+      name2.value += '!!!!'
+    }, 2000);
+    return {
+      // ...state,
+      // state2
+      name,
+      age,
+      name2,
+      age2
+    };
+  },
+});
+</script>
+
+<style scoped>
+</style>

v3_project/11_ref获取元素/App.vue

@@ -0,0 +1,28 @@
+<template>
+  <h2>ref获取元素</h2>
+  <input type="text" ref="inputRef">
+  <!-- <input type="text"> -->
+</template>
+
+<script lang="ts">
+import { defineComponent,onMounted,ref } from 'vue'
+
+export default defineComponent({
+  //需求： 当页面加载完毕的之后 页面中的文本框可以直接获取焦点(自动获取焦点)
+  setup () {
+    //默认是空的 页面加载完毕说明组件已经存在 获取文本元素
+    const inputRef = ref<HTMLElement | null>(null)
+    //页面加载之后的API
+    onMounted(()=>{
+      inputRef.value && inputRef.value.focus() //自动获取焦点
+    })
+    return {
+      inputRef
+    }
+  }
+})
+</script>
+
+<style scoped>
+
+</style>

v3_project/12_shallowReactive和shallowRef/App.vue

@@ -0,0 +1,70 @@
+<template>
+  <h2>shallowReactive 与 shallowRef</h2>
+  <h3>m1: {{ m1 }}</h3>
+  <h3>m2: {{ m2 }}</h3>
+  <h3>m3: {{ m3 }}</h3>
+  <h3>m4: {{ m4 }}</h3>
+  <hr>
+  <button @click="update">更新数据</button>
+</template>
+
+<script lang="ts">
+import { defineComponent, reactive, shallowReactive,ref, shallowRef } from "vue";
+
+export default defineComponent({
+  setup() {
+    //深度劫持(深监视)  ------深度响应式
+    const m1 = reactive({
+      name: 'xiaoming',
+      firend: {
+        name: 'xiaohong'
+      }
+    })
+    //浅度响应式 只处理了对象内最外层的属性响应式
+    const m2 = shallowReactive({
+      name: 'xiaoming',
+      firend: {
+        name: 'xiaohong'
+      }
+    })
+    //深度
+    const m3 = ref({
+      name: 'xiaoming',
+      firend: {
+        name: 'xiaohong'
+      }
+    })
+    //shallowRef处理了value的响应式 不进行对象的reative处理
+    const m4 = shallowRef({
+      name: 'xiaoming',
+      firend: {
+        name: 'xiaohong'
+      }
+    })
+    const update = ()=>{
+      //更改m1的数据---reactive
+      // m1.name += '='
+      // m1.firend.name += '!'
+      //更改m2的数据---shallowReactive
+      // m2.name += '='
+      // m2.firend.name += '!'
+      //更改m3的数据---ref
+      // m3.value.name += '='
+      // m3.value.firend.name += '!'
+      //更改m4的数据---shallowRef
+      // m4.value.name += '='
+      console.log(m3,m4)
+    }
+    return {
+      m1,
+      m2,
+      m3,
+      m4,
+      update
+    };
+  },
+});
+</script>
+
+<style scoped>
+</style>

v3_project/13_shallwReadonly/App.vue

@@ -0,0 +1,40 @@
+<template>
+  <h2>readonly 和 shallowReadonly</h2>
+  <h3>state: {{ state }}</h3>
+  <button @click="update">更新</button>
+</template>
+
+<script lang="ts">
+import { defineComponent, reactive, readonly, shallowReactive, shallowReadonly } from 'vue'
+
+export default defineComponent({
+  //readonly 只读属性 
+  //shallowReadonly 浅只读属性
+  //使其自身的property对象 为只读
+  //但是不执行嵌套对象的深度只读转换
+  setup () {
+    const state = reactive({
+      name: 'zs',
+      friend: {
+        name: 'lisi'
+      }
+    })
+    const state2 = readonly(state)
+    const state3 = shallowReadonly(state)
+    const update = ()=>{
+      // state2.name += '=' //报错 只读属性
+      // state2.friend.name += '=' //报错
+      // state3.name += '=' //报错 只读属性
+      state3.friend.name += '!'
+    }
+    return {
+      state,
+      update
+    }
+  }
+})
+</script>
+
+<style scoped>
+
+</style>

v3_project/14_toRaw和markRaw/App.vue

@@ -0,0 +1,54 @@
+<template>
+  <h2> toRaw 与 markRaw</h2>
+  <h3>state: {{ state }}</h3>
+  <hr>
+  <button @click="testToRaw">测试toRaw</button>
+  <button @click="testMarkRow">测试markRaw</button>
+</template>
+
+<script lang="ts">
+import { defineComponent, markRaw, reactive, toRaw } from 'vue'
+interface userInfo{
+  name: string,
+  age: number,
+  likes?: string[]
+}
+export default defineComponent({
+  setup () {
+    const state = reactive<userInfo>({
+      name:'zs',
+      age: 18
+    })
+    const testToRaw = ()=>{
+      //把代理对象编程普通对象 数据变化 页面不变化
+      const user = toRaw(state)
+      user.name += '=='
+      console.log(111)
+    }
+    const testMarkRow = ()=>{
+      // state.likes = ['吃','喝']
+      // state.likes[0] += '='
+      // console.log(state)
+      const likes = ['吃','喝']
+      state.likes = markRaw(likes)
+      //markRaw标记独享的数据，从此以后都不能成为代理对象了
+      setInterval(()=>{
+        if(state.likes){
+          state.likes[0] += '='
+          console.log('定时器启动')
+        }
+      },1000)
+    }
+
+    return {
+      state,
+      testToRaw,
+      testMarkRow
+    }
+  }
+})
+</script>
+
+<style scoped>
+
+</style>

v3_project/src/App.vue

@@ -1,57 +1,54 @@
 <template>
-  <h2>toRefs</h2>
-  <!-- <h3>name: {{ state2.name }}</h3>
-  <h3>age: {{ state2.age }}</h3> -->
-
-  <h3>name: {{ name }}</h3>
-  <h3>age: {{ age }}</h3>
-
-  <h3>name2: {{ name2 }}</h3>
-  <h3>age2: {{ age2 }}</h3>
+  <h2> toRaw 与 markRaw</h2>
+  <h3>state: {{ state }}</h3>
+  <hr>
+  <button @click="testToRaw">测试toRaw</button>
+  <button @click="testMarkRow">测试markRaw</button>
 </template>
 
 <script lang="ts">
-import { defineComponent, reactive, toRef, toRefs } from "vue";
-function useFeature() {
-  const state = reactive({
-    name2: "xiaoming",
-    age2: 18,
-  });
-  return {
-    ...toRefs(state)
-  }
+import { defineComponent, markRaw, reactive, toRaw } from 'vue'
+interface userInfo{
+  name: string,
+  age: number,
+  likes?: string[]
 }
 export default defineComponent({
-  //toRefs 把一个响应式对象转化成普通对象  该普通对象的每个 property都是一个ref
-  setup() {
-    const state = reactive({
-      name: "xiaoming",
-      age: 18,
-    });
-    const state2 = toRefs(state)
-    console.log(state)
-    console.log(state2)
-    const { name, age } = toRefs(state);
-    //解决： 利用toRefs可以将一个响应式reactive 对象的所有原始属性转化为ref属性
-    //应用： 当从而成函数返回响应式对象时，可以在不丢失响应式的情况下对返回的对象进行分解使用
-    const {name2,age2} = useFeature()
-    setInterval(() => {
-      // state.name += '='
-      // state2.name.value += '!'
-      name.value += "!!!!";
-      name2.value += '!!!!'
-    }, 2000);
+  setup () {
+    const state = reactive<userInfo>({
+      name:'zs',
+      age: 18
+    })
+    const testToRaw = ()=>{
+      //把代理对象编程普通对象 数据变化 页面不变化
+      const user = toRaw(state)
+      user.name += '=='
+      console.log(111)
+    }
+    const testMarkRow = ()=>{
+      // state.likes = ['吃','喝']
+      // state.likes[0] += '='
+      // console.log(state)
+      const likes = ['吃','喝']
+      state.likes = markRaw(likes)
+      //markRaw标记独享的数据，从此以后都不能成为代理对象了
+      setInterval(()=>{
+        if(state.likes){
+          state.likes[0] += '='
+          console.log('定时器启动')
+        }
+      },1000)
+    }
+
     return {
-      // ...state,
-      // state2
-      name,
-      age,
-      name2,
-      age2
-    };
-  },
-});
+      state,
+      testToRaw,
+      testMarkRow
+    }
+  }
+})
 </script>
 
 <style scoped>
+
 </style>