Vue3笔记

1. man.js文件

// 引入一个工厂函数 createApp
import { createApp } from 'vue'
import App from './App.vue'

// 创建应用实例对象 app --- 类似于vue2中的vm，但app比vm更'轻'
const app = createApp(App)
console.log('app', app)
app.mount('#app')

2. setup函数

　　是vue3中一个新的配置，值是一个函数。组件中所用到的数据，方法等等，均要配置在setup中。setup有两种返回值，若返回对象，则对象中的属性，方法，在模板中均可以直接使用。若返回一个渲染函数，则可以自定义渲染内容。一般不推荐vue2和vue3混用，若data和setup混用，则data可以访问setup中的属性，方法，setup不能访问data中的内容，如果有重名，setup的值优先使用。setup不能用async修饰。

3. ref函数

作用：定义响应式数据。

语法：const xxx = ref(initValue)

　　创建一个包含响应式数据的引用对象（reference对象，简称ref对象）。

　　js中操作数据：xxx.value

　　模板中读取数据：不需要.value, 直接 <div>{{xxx}}</div>

备注：

　　接收的数据可以是：基本类型、也可以是对象类型。

　　基本类型的数据：响应式依然是靠Object.defineProperty()的get与set完成的。

　　对象类型的数据：内部使用了vue3.0中的一个新函数reactive函数。

3. reactive函数 

作用：定义一个对象类型的响应数据（基本类型不要用它，要用ref函数）

语法：const 代理对象 = reactive（源对象）接收一个对象或 数组，返回一个代理对象（Proxy的实例对象，简称proxy对象）

reactive定义的响应式数据是“深层次的”。

内部基于ES6的Proxy实现，通过代理对象操作源对象内部数据进行操作。

4. vue3.0 中的响应式原理

　　vue2.0响应式的实现原理：

　　对象类型：通过Object.defineProperty()对属性的读取，修改进行拦截（数据劫持）。

　　数组类型：通过 重写更新数组的一系列方法来实现拦截。（对数组的变更方法进行了包裹）。

　　存在问题：新增属性，删除属性，界面不会更新。直接通过下标修改数组，界面不会自动更新。

  　  vue3.0响应式实现原理：

　　通过Proxy（代理）：拦截对象中任意属性的变化，包括：属性值的读写，属性的添加，属性的删除等。

　　通过Reflect（反射）：对被代理对象的属性进行操作。