vue3笔记和源码补充

Vue/code/01.源码/App.vue

@@ -0,0 +1,28 @@
+<template>
+  <img alt="Vue logo" src="./assets/logo.png" />
+  <HelloWorld msg="Welcome to Your Vue.js + TypeScript App" />
+</template>
+
+<script lang="ts">
+import { defineComponent } from 'vue'
+// defineComponent函数,目的是定义一个组件,内部可以传入一个配置对象
+import HelloWorld from './components/HelloWorld.vue'
+
+export default defineComponent({
+  name: 'App',
+  components: {
+    HelloWorld
+  }
+})
+</script>
+
+<style>
+#app {
+  font-family: Avenir, Helvetica, Arial, sans-serif;
+  -webkit-font-smoothing: antialiased;
+  -moz-osx-font-smoothing: grayscale;
+  text-align: center;
+  color: #2c3e50;
+  margin-top: 60px;
+}
+</style>

Vue/code/01.源码/components/HelloWorld.vue

@@ -0,0 +1,61 @@
+<template>
+  <div class="hello">
+    <h1>{{ msg }}</h1>
+    <p>
+      For a guide and recipes on how to configure / customize this project,<br>
+      check out the
+      <a href="https://cli.vuejs.org" target="_blank" rel="noopener">vue-cli documentation</a>.
+    </p>
+    <h3>Installed CLI Plugins</h3>
+    <ul>
+      <li><a href="https://github.com/vuejs/vue-cli/tree/dev/packages/%40vue/cli-plugin-babel" target="_blank" rel="noopener">babel</a></li>
+      <li><a href="https://github.com/vuejs/vue-cli/tree/dev/packages/%40vue/cli-plugin-typescript" target="_blank" rel="noopener">typescript</a></li>
+      <li><a href="https://github.com/vuejs/vue-cli/tree/dev/packages/%40vue/cli-plugin-eslint" target="_blank" rel="noopener">eslint</a></li>
+    </ul>
+    <h3>Essential Links</h3>
+    <ul>
+      <li><a href="https://vuejs.org" target="_blank" rel="noopener">Core Docs</a></li>
+      <li><a href="https://forum.vuejs.org" target="_blank" rel="noopener">Forum</a></li>
+      <li><a href="https://chat.vuejs.org" target="_blank" rel="noopener">Community Chat</a></li>
+      <li><a href="https://twitter.com/vuejs" target="_blank" rel="noopener">Twitter</a></li>
+      <li><a href="https://news.vuejs.org" target="_blank" rel="noopener">News</a></li>
+    </ul>
+    <h3>Ecosystem</h3>
+    <ul>
+      <li><a href="https://router.vuejs.org" target="_blank" rel="noopener">vue-router</a></li>
+      <li><a href="https://vuex.vuejs.org" target="_blank" rel="noopener">vuex</a></li>
+      <li><a href="https://github.com/vuejs/vue-devtools#vue-devtools" target="_blank" rel="noopener">vue-devtools</a></li>
+      <li><a href="https://vue-loader.vuejs.org" target="_blank" rel="noopener">vue-loader</a></li>
+      <li><a href="https://github.com/vuejs/awesome-vue" target="_blank" rel="noopener">awesome-vue</a></li>
+    </ul>
+  </div>
+</template>
+
+<script lang="ts">
+import { defineComponent } from 'vue';
+
+export default defineComponent({
+  name: 'HelloWorld',
+  props: {
+    msg: String,
+  },
+});
+</script>
+
+<!-- Add "scoped" attribute to limit CSS to this component only -->
+<style scoped>
+h3 {
+  margin: 40px 0 0;
+}
+ul {
+  list-style-type: none;
+  padding: 0;
+}
+li {
+  display: inline-block;
+  margin: 0 10px;
+}
+a {
+  color: #42b983;
+}
+</style>

Vue/code/01.源码/main.ts

@@ -0,0 +1,4 @@
+import { createApp } from 'vue'
+import App from './App.vue'
+
+createApp(App).mount('#app')

Vue/code/01.源码/shims-vue.d.ts

@@ -0,0 +1,6 @@
+/* eslint-disable */
+declare module '*.vue' {
+  import type { DefineComponent } from 'vue'
+  const component: DefineComponent<{}, {}, any>
+  export default component
+}

Vue/code/02.setup初识/App.vue

@@ -0,0 +1,20 @@
+<template>
+  <div>setup</div>
+  <h1>{{ number }}</h1>
+</template>
+
+<script lang="ts">
+import { defineComponent } from 'vue'
+
+export default defineComponent({
+  name: 'App',
+  //  setup是组合API中第一个要使用的函数
+  setup() {
+    const number = 10
+
+    return {
+      number
+    }
+  }
+})
+</script>

Vue/code/03.setup和ref的基本使用/App.vue

@@ -0,0 +1,56 @@
+<template>
+  <h2>setup和ref的基本使用</h2>
+  <h3>{{ count }}</h3>
+  <button @click="updateCount">更新数据</button>
+</template>
+
+<script lang="ts">
+import { defineComponent, ref } from 'vue'
+
+export default defineComponent({
+  name: 'App',
+  // 需求:页面打开后可以直接看到一个数据,点击按钮后,该数据可以发生变化
+  // vue2的方式实现
+  // data() {
+  //   return {
+  //     count: 0 // 属性
+  //   }
+  // },
+  // methods: {
+  //   updateCount() {
+  //     // 方法
+  //     this.count++
+  //   }
+  // },
+
+  // vue3的方式实现
+  // setup是组合API的入口函数
+  setup() {
+    // console.log('第一次')
+    // 变量
+    // let count = 0 // 此时的数据并不是响应式的数据(响应式数据:数据变化,页面跟着渲染变化)
+
+    // ref是一个函数,作用:定义一个响应式的数据,返回的是一个Ref对象,
+    // 对象中有一个value属性,如果需要对数据进行操作,需要使用该Ref对象调用value属性的方式进行数据的操作
+    // html模版中是不需要使用.value属性的写法
+    // TODO 一般用来定义一个基本类型的响应式数据
+    // count 的类型 Ref类型
+    const count = ref(0)
+    console.log(count)
+    // 方法
+    function updateCount() {
+      console.log('=====')
+      // 报错的原因:count是一个Ref对象,对象是不能进行++的操作
+      // count++
+      count.value++
+    }
+    // 返回的是一个对象
+    return {
+      // 属性
+      count,
+      // 方法
+      updateCount
+    }
+  }
+})
+</script>

Vue/code/04.reactive基本使用/App.vue

@@ -0,0 +1,78 @@
+<template>
+  <h2>reactive的使用</h2>
+  <h3>名字:{{ user.name }}</h3>
+  <h3>年龄:{{ user.age }}</h3>
+  <h3>性别:{{ user.gender }}</h3>
+  <h3>媳妇:{{ user.wife }}</h3>
+  <hr />
+  <button @click="updateUser">更新数据</button>
+</template>
+
+<script lang="ts">
+import { defineComponent, reactive } from 'vue'
+
+export default defineComponent({
+  name: 'App',
+  // 需求:显示用户的相关信息,点击按钮,可以更新用户的相关信息数据
+
+  /*
+  reactive
+  作用: 定义多个数据的响应式
+  const proxy = reactive(obj): 接收一个普通对象然后返回该普通对象的响应式代理器对象
+  响应式转换是“深层的”：会影响对象内部所有嵌套的属性
+  内部基于 ES6 的 Proxy 实现，通过代理对象操作源对象内部数据都是响应式的
+  */
+  setup() {
+    // const obj: any = { // 为了在使用obj.gender='男' 的时候不出现这种错误的提示信息才这么书写
+    const obj = {
+      name: '小明',
+      age: 20,
+      wife: {
+        name: '小甜甜',
+        age: 18,
+        cars: ['奔驰', '宝马', '奥迪']
+      }
+    }
+    // 把数据变成响应式的数据
+    // 返回的是一个Proxy的代理对象,被代理的目标对象就是obj对象
+    // user现在是代理对象,obj是目标对象
+    // user对象的类型是Proxy
+    const user = reactive<any>(obj)
+    console.log(user)
+
+    const updateUser = () => {
+      // 直接使用目标对象的方式来更新目标对象中的成员的值,是不可能的,
+      // 只能使用代理对象的方式来更新数据(响应式数据)
+      // obj.name += '==='
+      // 下面的可以
+      // user.name += '=='
+      // user.age += 2
+      // user.wife.name += '++'
+      // user.wife.cars[0] = '玛莎拉蒂'
+
+      // user---->代理对象,user---->目标对象
+      // user对象或者obj对象添加一个新的属性,哪一种方式会影响界面的更新
+      // obj.gender = '男' // 这种方式,界面没有更新渲染
+      // user.gender = '男' // 这种方式,界面可以更新渲染,而且这个数据最终也添加到了obj对象上了
+      // user对象或者obj对象中移除一个已经存在的属性,哪一种方式会影响界面的更新
+      // delete obj.age // 界面没有更新渲染,obj中确实没有了age这个属性
+      // delete user.age // 界面更新渲染了,obj中确实没有了age这个属性
+
+      // TODO 总结: 如果操作代理对象,目标对象中的数据也会随之变化,同时如果想要在操作数据的时候,界面也要跟着重新更新渲染,那么也是操作代理对象
+
+      // 通过当前的代理对象找到该对象中的某个属性,更改该属性中的某个数组的数据
+      // user.wife.cars[1] = '玛莎拉蒂'
+
+      // 通过当前的代理对象把目标对象中的某个数组属性添加一个新的属性
+      user.wife.cars[3] = '奥拓'
+      console.log(obj)
+      console.log(user)
+    }
+
+    return {
+      user,
+      updateUser
+    }
+  }
+})
+</script>

Vue/code/05.vue3的响应式数据的核心原理/index.html

@@ -0,0 +1,57 @@
+<!DOCTYPE html>
+<html lang="zh">
+  <head>
+    <meta charset="UTF-8" />
+    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
+    <meta http-equiv="X-UA-Compatible" content="ie=edge" />
+    <title>vue3的响应式数据的核心原理</title>
+  </head>
+
+  <body>
+    <script type="text/javascript">
+      // 目标对象
+      const user = {
+        name: '佐助',
+        age: 20,
+        wife: {
+          name: '小樱',
+          age: 19
+        }
+      }
+      // 把目标对象变成代理对象
+      // 参数1: user---->target目标对象
+      // 参数2: handler---->处理器对象,用来监视数据,及数据的操作
+      const proxyUser = new Proxy(user, {
+        // 获取目标对象的某个属性值
+        get(target, prop) {
+          console.log('get方法调用了')
+          return Reflect.get(target, prop)
+        },
+        // 修改目标对象的属性值/为目标对象添加新的属性
+        set(target, prop, val) {
+          console.log('set方法调用了')
+          return Reflect.set(target, prop, val)
+        },
+        // 删除目标对象上的某个属性
+        deleteProperty(target, prop) {
+          console.log('delete方法调用了')
+          return Reflect.deleteProperty(target, prop)
+        }
+      })
+
+      // 通过代理对象获取目标对象中的某个属性值
+      console.log(proxyUser.name)
+      // 通过代理对象更新目标对象上的某个属性值
+      proxyUser.name = '鸣人'
+      console.log(user)
+      // 通过代理对象向目标对象中添加一个新的属性
+      proxyUser.gender = '男'
+      console.log(user)
+      delete proxyUser.name
+      console.log(user)
+      // 更新目标对象中的某个属性对象中的属性值
+      proxyUser.wife.name = '雏田'
+      console.log(user)
+    </script>
+  </body>
+</html>

Vue/code/06.setup的细节问题/App.vue

@@ -0,0 +1,31 @@
+<template>
+  <h2>App父级组件</h2>
+  <h3>msg:{{ msg }}</h3>
+  <button @click="msg += '==='">更新数据</button>
+  <Child msg2="真香" :msg="msg" @xxx="xxx" />
+</template>
+
+<script lang="ts">
+import { defineComponent, ref } from 'vue'
+import Child from './components/Child.vue'
+
+export default defineComponent({
+  name: 'App',
+  components: {
+    Child
+  },
+  setup() {
+    const msg = ref('how old are you?')
+
+    function xxx(txt: string) {
+      console.log('接收子组件数据')
+      msg.value += txt
+    }
+
+    return {
+      msg,
+      xxx
+    }
+  }
+})
+</script>