一、创建3.0项目
1.
2. main.js页面
//引入createApp工厂函数，用于创建Vue实例对象
import { createApp } from 'vue';
//引入项目的 主vue页面
import App from '@/App.vue';
//创建vue实例对象app，并将实例对象放到App.vue页面里（实例对象上的路由组件也会在那里显示）
const app = createApp(App);
//将app实例对象挂载到id选择器为app的元素上，该元素在index.js文件里
app.mount('#app');
注意：vue3.0不再支持2.0中引入、挂载Vue的方式。
vue3.0的页面不再需要页面根元素包裹所有HTML内容。
3.vue开发者工具
vue3.0不能使用vue2.0的开发者工具。
去Chrome应用商店搜索新版本的开发者工具。
https://www.gugeapps.net/webstore/search?key=vue
二、setUp()函数
1.什么是setUp
（1）setup()是vue3.0中的一个新的配置项，值是一个函数。
（2）setUp()是所有 组合式API的 “舞台”。
2.setUp函数的作用
- 组件中所用到的：数据、方法、计算属性、生命周期函数、监听器、nextTick函数......等内容都要配置在setUp()中。
- 用到的配置项都要从vue引入。
- setUp()函数应有返回值，两种返回值类型：
（1）若返回一个 对象，则对象的属性和方法在模板中都可以直接使用。（重点关注）
（2）若返回一个渲染函数，则可以自定义渲染内容。（了解。通常是vue2.0模式或结合jsx）
（3）vue3.0推荐使用 渲染函数render() 进行搭建HTML页面。（结合jsx）
3.参数
setUp()函数接收两个参数：
（1）props，子组件内，要先在setUp函数外 声明props属性，然后通过参数，将父组件传递的数据传到setUp()内使用。（如果在HTML中直接使用props数据，则无需在setup()中声明、返回）
（2）context，该参数是一个对象，包含 attrs、emits、slots。
- attrs：值为对象，包含：组件外部传来，且没有用props接收的属性，相当于this.$attrs。
- emits：自定义事件，子组件内，要先在setUp函数外 声明emits属性，然后在setUp()内触发自定义事件。相当于this.$eimt。
- slots：收到的插槽内容，相当于this.$slots。
{{arr.id}}
{{childValue.name}}
点击改变父组件传递的数据
4.注意
（1）setUp()在beforCreate()之前执行，所有函数内的 this值为undefined。getCurrentInstance()方法可以获取到组件实例。
先引入：import {getCurrentInstance} from 'vue';
proxy相当于this：const { proxy } = getCurrentInstance();
（2）setUp() 不能被 async 修饰，一旦使用，则返回值会被Promise包裹。
（3）vue2.0配置不要和3.0配置混用，因为：
- vue3.0中的方法不能访问到vue2.0中定义的变量和方法。
- 混用时，变量或方法重名，以vue3.0为准。
5.小结
(1) 组件通信props、事件触发emits、组件声明component 都写在 export 之中，setup()之前。
(2) 外部引用 的.js文件，无需在setup()中声明，但是要在 return 中返回。
（5）vue3.0中，setup()内部使用数据，和模板中一样，都不用加 this或proxy。
三、ref()函数
1.作用
不加任何修饰的 setUp()函数中 定义的变量，不具有响应式。ref函数可以让数据具有响应式。
2.语法
先引入：import {ref} from 'vue'
const 变量名 = ref（变量值）
（1）ref将变量放到了 引用对象 中。（RefImpl：引用实现的实例对象）
（2）JS中操作变量：变量名.value；在模板中 直接使用 ref定义的变量。【重要！！！】
（3）如果用ref转换对象，则在js中应使用变量名.value.属性名
3.注意：
（1）ref可以接收基本数据类型，或者对象类型。
（2）基本数据类型依靠 defineProperty()的getter、setter实现响应式。
（3）对象类型数据依靠 reactive()方法实现响应式。
四、reactive()函数
1.作用
将 对象（或数组）类型的数据 变为响应式。
2.语法
先引入：import {reactive} form 'vue'
let 变量名 = reactive（变量值）
（1）内部通过ES6的Proxy实现。返回的是一个Proxy代理对象。
（2）vue3.0中可以直接修改对象属性和数组元素，也有响应式
3.修改对象的属性
（1）如果修改对象中多个属性值并保留响应式，下面的情况是不生效的：
let obj = reactive({
name: '张三',
age: 5,
});
const changeInfo = () => {
obj = {
name: '李四',
age: 66,
};
};
（2）可以使用 .属性名 的方式逐个修改对象的属性
（3）也可以在定义数据时再包裹一层对象
const obj = reactive({
info: {
name: '张三',
age: 55,
},
});
const changeInfo = () => {
obj.info = {
name: '李四',
age: 66,
};
};
4.应用
（1）reactive()函数只能接受 "对象"。
（2）实际开发中，用一个对象变量state，包裹所有数据，reactive()接收state即可，return返回state即可。
setup() {
//数据
const state = reactive({});
//方法、计算属性、监视器......
......
}
5.为什么不用ref代替reactive
const person = ref({name:'李四'})
如果用ref包裹对象，则在js中获取数据时：person.value.name。
五、toRef()
1.作用
（1）将对象中的某个属性 单独拿出来，转换成一个单独的 ref响应式数据，并且与原对象（的属性）是 同一个数据。
（2）这样拆解，是为了方便在HTML中使用，不用再用对象.属性这么麻烦。
语法：const newKey = toRef(对象，属性名)
2.使用ref()和toRef()转换响应式数据的区别
ref()将任意转换为响应式数据；
toRef()将 对象 中的 某个属性 拿出来，转换为ref响应式数据。
ref()是对原数据的 复制，返回值是一个 新的响应式数据。
toRef()是对原数据的 引用，返回值与原数据（的属性值）是同一个数据。
const person = ref({ name: '马冬梅' }); // 原数据
const refValue = ref(person.name); // 用ref转换的响应式数据
const toRefValue = toRef(person,'name'); // 用toRef()转换的响应式数据
const changeRef = () => {
refValue .value = '王祖贤'; // 修改的只是refValue这个数据，原数据person没变
toRefValue .value = '王祖贤'; // toRefValue和person同时被修改，因为他们是同一个数据
};
3.toRefs()
可以将一个对象中的 所有属性 转换为 ref响应式数据。返回值是一个对象。
语法：const newKey = toRefs(对象)
六、ref组件实例
1.vue3.0中通过ref获取组件实例
（1）给组件添加 ref属性，属性值为自定义变量（refName）。
（2）在setup()中 声明自定义变量
const refName = ref(null)
（3）在js中通过访问 变量名.value 拿到组件实例。
console.log(refName.value)
2.vue2.0中通过ref获取组件实例
（1）给组件添加 ref属性，属性值为自定义变量。
（2）在js中通过 this.$refs.变量名 获取到组件实例。
3.循环动态生成的表单添加ref
（1）通过方法的形式给ref属性赋值。:ref="(el)=>getRefs(el,index)"
（2）使用时无需调用this.$refs，因为自定义变量中存储的就是 表单对象ref本身。
// 数据部分
const state = reactive({
formArr: [
{
id: 0,
data: { age: '222' },
rules: { age: [{ required: true, trigger: 'change', message: '空' }] },
},
],
refs: [],
}）
// 方法
const getRefs = (el, index) => {
state.refs[index] = el;
};
// 更新前清除校验，否则表单虽然删除了，但是检验规则被下一个表单 继承了
onBeforeUpdate(() => {
state.refs = state.refs.filter((item) => item !== null);
state.refs.forEach((item) => {
item.clearValidate();
});
});
七、计算属性
1.先引入computedAPI（组合式API）
import { defineComponent, reactive, toRefs, computed } from 'vue';
2.计算属性的两种写法
// 简写版，只读
let js1 = computed(() => { return xxx })
// 完整版，可读也可以对计算属性的值进行修改
let js2 = computed(() => { return {
get() {
return xxx
},
set(value) {
}}
})
八、watch监视器
import { watch } from 'vue'
watch(监视的值，(newValue,oldValue)=>{ },{ deep: true })
1.监听 ref 定义的响应式数据（简单数据）
（1）如果要监听多个数据，可以写多个watch()函数进行监听。
watch(name, (newValue, oldValue) => {
console.log(newValue, oldValue);
}, { immediate: true, deep: true });
（2）或者监听一个数组，此时newValue和oldValue也是数组
watch([name, age], (newValue, oldValue) => {
console.log(newValue, oldValue);
}, { immediate: true });
2.监听 reactive 定义的响应式数据（对象）
（1）监听reactive定义的响应式数据的 全部属性(对象本身)
- oldValue的值有误，与newValue值一样
- 强制开启深度监听(deep属性无效)
// (1)oldValue的值有误，与newValue值一样
// (2)强制开启深度监听(deep属性无效)
watch(person, (newValue, oldValue) => {
console.log(newValue, oldValue);
});
（2）监听reactive定义的响应式数据的 某个属性(简单数据类型)
- 应当用函数返回值的形式
// 应当用函数返回值的形式
watch(() => person.name, (newValue, oldValue) => {
console.log(newValue, oldValue);
});
（3）监听reactive定义的响应式数据的 多个属性(简单数据类型)
- 用数组包裹，数组元素依然是函数形式
// 用数组包裹，数组元素依然是函数形式
watch([() => person.name, () => person.age], (newValue, oldValue) => {
console.log(newValue, oldValue);
});
（4）监听reactive定义的响应式数据中的一个对象属性
- oldValue值有误
- 深度监听deep的值有效
// (1)oldValue值有误
// (2)深度监听deep的值有效
watch(() => person.job, (newValue, oldValue) => {
console.log(newValue, oldValue);
}, { deep: true });
3. 监听ref定义的 对象
（1）当ref定义的是简单数据类型时，watch应当 直接监听该数据，因为ref将数据变成了一个 RefImpl对象。（如果监听了 "变量.value"，相当于监听的是一个数字或字符串。）
（2）当ref定义的是对象，watch应当监听 "变量.value" ，因为 "变量.value" 是有reactive定义的对象。
（3）或者开启深度监听，因为 "变量.value" 值是一个对象，只有当对象的地址被覆盖时才能被监听到。
九、watchEffect
watch（()=>{ } ）
watchEffect类似于 计算属性：
（1）不直接指明监视的数据；而是回调函数中用到的任意一个数据发生改变时，会重新执行回调函数。
（2）计算属性注重的是结果，所以必须有返回值；watchEffect注重的是回调函数的执行过程。
十、生命周期
1.beforDestoryed和destroyed钩子函数替换为 beforUnmounted 和 unmounted
2.可以和vue2.0一样，通过配置项的形式写生命周期函数，与setup()同级别。
3.也可以在setup()中写生命周期函数。
4.setup()中没有beforeCreate、created对应的钩子函数。
5.其他六个钩子函数都要在前面加on。
6.语法：onMounted(()=>{})
十一、父子通信
1.普通父子传值
跟vue2.0用法一致，变化的是要提前声明props和emits。
2.v-model
（1）父组件给子组件传递数据时，用v-model代替v-bind绑定数据
（2）子组件用props 接收后可以使用数据。
（3）父组件无需绑定自定义事件，子组件也无需声明emits，可以直接在子组件中更新这个数据。
emit('update:自定义名称'，最新数据);
// 父组件给子组件传值
（4）一个组件上可以 多次 使用v-model双向传递数据。
3.provide和inject
先在页面 引入 provide或inject；然后在setup()中写入下面的代码：
provide('自定义变量名'，传递的数据)
inject('同名变量名'，默认值)
// 祖先传值
const people = ref({
name: '李四',
});
provide('people', people);
// 后代接收
const peopleFormInject = inject('people', {});
const peopleFormInject = ref(inject('people', {}))
注意：
（1）这种传值方式也是 单向数据流。如果后代组件想要修改数据，可以由父组件传递方法。
（2）如果provide 一个 响应式数据，且该数据被对象包裹，则应该传递 完整的对象，才不会破坏其响应式。
参考：https://www.jianshu.com/p/e97612cd437d
4. 子组件修改父组件数据注意
子组件可以直接修改父组件传递的 对象中的属性、数组元素，但是，该属性必须是由 父组件传递而来，不能是在子组件中添加的，否则数据能更新，视图不更新。
要在父组件中处理好数据，如下图：
在子组件中添加的数据，能通过emit修改，但视图不更新：
5. 子组件使用父组件数据
1.由于生命周期，子组件先OnMounted后父组件才OnMounted，所以父组件通过接口获取的数据，子组件在OnBeforeUpdate时才能获取到。
2.父子传值时可以不用props传递，而是在子组件内部声明方法，方法的形参就是父组件传递的数据，方法内部使用数据。
3.父组件通过refs调用子组件的方法，通过实参传递数据。
（1）父组件按钮点击时的事件处理函数：调用子组件方法并传递数据
handleOpenModal(flag, row) {
const { handleOpen } = this.$refs.DataModal;
handleOpen(flag, row);
}
},
（2）子组件声明方法，并使用数据
// 弹窗打开
const handleOpen = (flag, row) => {
const { id, name } = row;
MyOrgApi.subOrgList(id).then((res) => {
const { code, data, message } = res.data || {};
if (code === 200) {
});
};
十二、vue3.0响应式原理
vue2.0和vue3.0响应式原理 重点参考146：
https://www.bilibili.com/video/BV1Zy4y1K7SH?p=145