new

v3_project/6_reactive和ref的细节/App.vue

@@ -0,0 +1,51 @@
+<template>
+  <h2>ref 和 reactive的细节问题</h2>
+  <h3>m1: {{ m1 }}</h3>
+  <h3>m2: {{ m2 }}</h3>
+  <h3>m3: {{ m3 }}</h3>
+
+  <button @click="update">更新</button>
+</template>
+
+<script lang="ts">
+import { defineComponent,ref,reactive } from 'vue'
+
+export default defineComponent({
+  //ref用于处理基本数据类型 reactive 用来处理对象
+  //如果用ref 对象/数组 内部会自动将对象 数组 转化为reactive代理的对象
+  //ref的数据操作： 在ts中要.value，在模板中不需要
+  //ref: 内部 通过给value属性添加getter/setter来实现对数据的劫持
+  //reactive： 通过proxy来实现对于对象内部所有数据的劫持，并且通过reflect操作对象内部数据
+  setup () {
+    const m1 = ref('abc')
+    const m2 = reactive({
+      name: 'xiaoming',
+      friend: {
+        name: 'xiaohong'
+      }
+    })
+
+    const m3 = ref({
+      name: 'xiaolan',
+      friend: {
+        name: 'xiaobai'
+      }
+    })
+    const update= ()=>{
+      m1.value += '!'
+      m2.friend.name +='='
+      m3.value.friend.name += '!'
+    }
+    return {
+      m1,
+      m2,
+      m3,
+      update
+    }
+  }
+})
+</script>
+
+<style scoped>
+
+</style>

v3_project/7_计算属性和监听属性/App.vue

@@ -0,0 +1,86 @@
+<template>
+  <h2>计算属性和监听属性</h2>
+  <fieldset>
+    <legend>姓名操作</legend>
+    姓氏： <input type="text" v-model="user.firstName" />
+    <br />
+    名字： <input type="text" v-model="user.lastName" />
+  </fieldset>
+  <fieldset>
+    <legend>计算属性和监听的演示</legend>
+    姓名: <input type="text" v-model="fullName1" /><br />
+    姓名: <input type="text" v-model="fullName2" /><br />
+    姓名: <input type="text" v-model="fullName3" />
+  </fieldset>
+</template>
+
+<script lang="ts">
+import { defineComponent, computed, watch, ref, reactive ,watchEffect} from "vue";
+
+export default defineComponent({
+  setup() {
+    const user = reactive({
+      firstName: "小猪",
+      lastName: "佩奇",
+    });
+    //通过计算属性的方式
+    //vue3中的计算属性
+    const fullName1 = computed(() => {
+      return user.firstName + "_" + user.lastName;
+    });
+
+    const fullName2 = computed({
+      get() {
+        return user.firstName + "_" + user.lastName;
+      },
+      set(val: string) {
+        const names = val.split("_");
+        user.firstName = names[0];
+        user.lastName = names[1];
+      },
+    });
+
+    const fullName3 = ref("");
+    watch(
+      user,
+      ({ firstName, lastName }) => {
+        fullName3.value = firstName + "_" + lastName;
+      },
+      {
+        immediate: true,
+        deep: true,
+      }
+    );
+    //immediate 一开始执行一次   deep深度监视
+
+    //监视
+    // watchEffect(()=>{
+    //   fullName3.value = user.firstName + '_' + user.lastName
+    // })
+    //监视fullName3的数据 去改变firstName和lastName
+    // watchEffect(()=>{
+    //   const names = fullName3.value.split('_')
+    //   user.firstName = names[0]
+    //   user.lastName = names[1]
+    // })
+    //fullName3 是响应式数据
+    // watch([user.firstName,user.lastName,fullName3],()=>{
+    //   console.log('========')
+    // })
+
+    //如果非要监听非响应式数据的时候
+    watch([()=>user.lastName,()=>user.firstName],()=>{
+      console.log('!!!!')
+    })
+    return {
+      user,
+      fullName1,
+      fullName2,
+      fullName3,
+    };
+  },
+});
+</script>
+
+<style scoped>
+</style>

v3_project/src/App.vue

@@ -1,29 +1,86 @@
 <template>
-  <h2>父级组件</h2>
-  <h1>msg: {{ msg }}</h1>
-  <button @click="msg += '==='">更新数据</button>
-  <hr>
-  <Child :msg = "msg"></Child>
+  <h2>计算属性和监听属性</h2>
+  <fieldset>
+    <legend>姓名操作</legend>
+    姓氏： <input type="text" v-model="user.firstName" />
+    <br />
+    名字： <input type="text" v-model="user.lastName" />
+  </fieldset>
+  <fieldset>
+    <legend>计算属性和监听的演示</legend>
+    姓名: <input type="text" v-model="fullName1" /><br />
+    姓名: <input type="text" v-model="fullName2" /><br />
+    姓名: <input type="text" v-model="fullName3" />
+  </fieldset>
 </template>
 
 <script lang="ts">
-import { defineComponent,ref } from 'vue'
-import Child from "./components/Child.vue"
+import { defineComponent, computed, watch, ref, reactive ,watchEffect} from "vue";
 
 export default defineComponent({
-  setup () {
-    const msg = ref('在干嘛')
+  setup() {
+    const user = reactive({
+      firstName: "小猪",
+      lastName: "佩奇",
+    });
+    //通过计算属性的方式
+    //vue3中的计算属性
+    const fullName1 = computed(() => {
+      return user.firstName + "_" + user.lastName;
+    });
 
+    const fullName2 = computed({
+      get() {
+        return user.firstName + "_" + user.lastName;
+      },
+      set(val: string) {
+        const names = val.split("_");
+        user.firstName = names[0];
+        user.lastName = names[1];
+      },
+    });
+
+    const fullName3 = ref("");
+    watch(
+      user,
+      ({ firstName, lastName }) => {
+        fullName3.value = firstName + "_" + lastName;
+      },
+      {
+        immediate: true,
+        deep: true,
+      }
+    );
+    //immediate 一开始执行一次   deep深度监视
+
+    //监视
+    // watchEffect(()=>{
+    //   fullName3.value = user.firstName + '_' + user.lastName
+    // })
+    //监视fullName3的数据 去改变firstName和lastName
+    // watchEffect(()=>{
+    //   const names = fullName3.value.split('_')
+    //   user.firstName = names[0]
+    //   user.lastName = names[1]
+    // })
+    //fullName3 是响应式数据
+    // watch([user.firstName,user.lastName,fullName3],()=>{
+    //   console.log('========')
+    // })
+
+    //如果非要监听非响应式数据的时候
+    watch([()=>user.lastName,()=>user.firstName],()=>{
+      console.log('!!!!')
+    })
     return {
-      msg
-    }
+      user,
+      fullName1,
+      fullName2,
+      fullName3,
+    };
   },
-  components: {
-    Child
-  }
-})
+});
 </script>
 
 <style scoped>
-
 </style>

v3_project/src/components/Child.vue

@@ -1,69 +0,0 @@
-<template>
-  <h2>子级组件</h2>
-  <h3>msg: {{ msg }}</h3>
-  <h3>count: {{ count }}</h3>
-  <h3>{{ a }}</h3>
-  <!-- <button @click="add">点击</button> -->
-</template>
-
-<script lang="ts">
-import { defineComponent ,ref} from 'vue'
-
-export default defineComponent({
-  name: 'Child',
-  props: ["msg"],
-  //数据初始化生命周期回调
-  beforeCreate(){
-    console.log("beforeCreate")
-  },
-  //setup 在beforeCreate回调之前就执行了 而且就执行一次
-  //setup执行的时候 组件没有创建出来 意味着组件实例对象this不能调用
-  //this是undefined 不能通过this调用  data/computed/methods/props 的东西
-
-  //setup返回值是一个方法和对象  内部的属性和方法都是给html模板去使用的
-  //setup中的对象的内部的属性和data函数中的return对象中的属性都可以在html模板当中使用
-  //setup中的对象中的属性和data函数中对象中的属性会合并成为组件对象的属性
-  //如果重名的话 setup数据优先
-  setup (props,content) {
-    console.log('setup',this)
-    console.log(props,content)
-    const a = 10
-    const c = ref(10)
-    /* 
-      props： 包含props配置声明且传入的所有属性的对象
-      attrs： 包含没有在props配置中声明的对象，this.$attrs
-      slots: 包含所有传入插槽内容的对象，相当于 this.$slots
-      emit: 用来分发自定义事件函数,相当于this.$emit
-    */
-   //注意： methods中可以访问setup所提供的属性和方法，但是在seup方法中不能访问data和methods
-    // function add(){
-    //   this.d++
-    // }
-    //setup不能是一个async函数： 因为返回值不是return对象，而是promise，模板看不到return对象中的属性数据
-    return {
-      a,
-      c
-    }
-  },
-  data(){
-    return{
-      count: 10,
-      a: 5,
-      d: 1
-    }
-  },
-  methods:{
-    // add(){
-    //   this.c++
-    //   console.log(this.c)
-    // }
-  },
-  mounted(){
-    console.log(this)
-  }
-})
-</script>
-
-<style scoped>
-
-</style>