模块与响应式实现

增加TypeScript^[1]支持

1. 修改 HTML 模板index.html
   

  <!-- <script type="module" src="/src/main.js"></script> -->
  <script type="module" src="/src/main.ts"></script>

1. 修改main.js
   为main.ts
   

Q：TypeScript 和 JavaScript 有什么区别？
A：TS 是 JS 的超集。TS 囊括了 JS 的全部语法概念，并额外支持了ECMAScript^[2]新特性。

Q：VSCode 插件Vetur^[3]提示Vetur can't find `tsconfig.json` or `jsconfig.json in Vue3Project.
怎么办？
A：

1. yarn add typescript -D
   安装 typescript 为开发依赖
2. ./node_modules .bin/tsc --init
   生成配置文件

Q：找不到模块"./App.vue"或其相应的类型声明。ts(2307)
怎么办？
A：在根目录中添加文件shims-vue.d.ts
优化文件类型推断。

declare module '*.vue' {
    import type { DefineComponent } from 'vue';
    const component: DefineComponent;
    export default component;
}

模块^[4]导入与导出

<script lang='ts'>
import HelloWorld from './components/HelloWorld.vue'; // 导入

// 默认导出
export default {
    name: 'App' // 组件名
    // 子组件
    components: {
        HelloWorld
    }
};
</script>

Q：export
和export default
有什么区别？
A：export
同文件中可以有多个，合并导出用大括号包裹，导出和导入须同名，导入要以大括号包裹。export default
同文件中只能有一个，导入和导出可以异名。

响应式^[5]实现

Vue 3

setup
是 Vue 3 中的新方法，是所有Composition API^[6]的入口。返回值在 template 中使用，因而不支持异步async
，否则将返回Promise
对象。

setup
仅在beforeCreate^[7]之前执行一次，此时组件实例对象尚未构建，因此无法在其中使用this
。

<template lang='pug'>
//- 插值语法
div {{ num }}
button(@click='add') +1
</template>

<script lang='ts'>
import { Ref, ref } from 'vue';

export default {
    props: {
        name: {
            type: String,
            default: '',
            required: false
        }
    },
    setup(props, { attrs, emit, slots }) {
        const num: Ref<number> = ref(0); // 建立基本类型的响应式对象
        function add(): void {
                num.value++; // 操作基本类型的响应式对象
        }
        return { num, add }
    }
}
</script>

Q：什么是插值语法？
A：插值语法又叫Mustache
语法，是 Vue.js 所支持的模板语法，可以在双花括号中嵌入变量值实现数据绑定。template 中要插入setup
的返回值就要使用插值语法。

Q：@
是什么？
A：@
是对v-on
指令的简写，用于绑定事件。

Q：setup
的参数有哪些？
A：参数有：

1. props
   ：父组件传递下来的数据，需要在子组件的props
   中进行声明
2. context
   ：

1. attrs
   ：在props
   中无声明但接收了的属性对象
2. emit
   ：分发事件方法，子传父
3. slots
   ：插槽^[8]

Vue 3 内部采用Proxy
实现响应式。ref
通过对数据的value
属性添加setter
和getter
方法进行劫持，将其处理为Proxy
对象。Proxy
的handler
提供 13 种方法，配合Reflect
对象返回目标对象的静态方法。

new Proxy(data, {
    get(target, props) {
        return Reflect.get(target, props);
    },
    set(target, props, val) {
        return Reflect.set(target, props, val);
    },
    deleteProperty(target, props) {
        return Reflect.deleteProperty(target, props, val);
    },
});

Vue 2

Vue 2 采用的是选项式 API。

<script lang='ts'>
export default {
    data() {
        return {
            num: 0,
        };
    },
    methods: {
        add() {
            this.num++;
        },
    },
}
</script>

Vue 2 内部采用Object.defineProperty
实现响应式。但这样做无法响应新增和删除的对象，而响应式数组则是通过重写来进行更新的，后来采用$set
进行部分操作。

Object.defineProperty(data, 'num', {
    get (){},
    set (){}
});

? Ask More...