一、创建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。

<template>
<!-- arr.id是将props数据解构到本页面使用；childValue.name则是直接使用的props数据  -->
 <div class="child-container">
    {{arr.id}}
    {{childValue.name}}
    <el-button type="primary" @click="changeValue">点击改变父组件传递的数据</el-button>
  </div>
</template>

<script>
import { defineComponent, reactive } from 'vue';

export default defineComponent({
  // 子组件要接收props数据
  props: {
    childValue: {
      type: Object,
      default: () => {},
    },
  },
  // 子组件要声明emits事件
  emits: ['childClick'],

  setup(props, { emit }) {
    // 通过props参数在setup中拿到父组件传递的props数据
    const arr = reactive({
      id: props.childValue.arr[1],
    });
    // 子组件触发父组件的自定义事件并传递数据
    const changeValue = () => {
      emit('childClick', '我是修改后的数据');
    };
    return {
      changeValue,
      arr,
    };
  },
});
</script>

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）。

<Child ref="refName" />

（2）在setup()中 声明自定义变量

const refName = ref(null)

（3）在js中通过访问 变量名.value 拿到组件实例。

console.log(refName.value)

<Child ref="childRef"></Child>

const childRef = ref(null);

onMounted(() => {
  console.log(childRef.value.arr);
});

注意： 如果使用的是<script setup></script>形式，则子组件要用 defineExpose 暴露属性和方法。

2.vue2.0中通过ref获取组件实例

（1）给组件添加 ref属性，属性值为自定义变量。
（2）在js中通过 this.$refs.变量名 获取到组件实例。

3.循环动态生成的表单添加ref

（1）通过方法的形式给ref属性赋值。:ref="(el)=>getRefs(el,index)"
（2）使用时无需调用this.$refs，因为自定义变量中存储的就是 表单对象ref本身。

    <div v-for="(item, index) in formArr" :key="item.id">
       <a-form :model="item.data" :rules="formRules" :ref="(el) => getRefs(el, index)">
         <a-form-item name="age" label="年龄">
           <a-input v-model:value="item.data.age" />
         </a-form-item>
       </a-form>
    </div>

// 数据部分
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绑定数据

<Child v-model:自定义名称="数据值" />

（2）子组件用props 接收后可以使用数据。
（3）父组件无需绑定自定义事件，子组件也无需声明emits，可以直接在子组件中更新这个数据。

emit('update:自定义名称'，最新数据);

// 父组件给子组件传值
<Kid v-model:doubleaction="doubleaction"></Kid>

// 子组件直接修改传递的数据
emit('update:doubleaction', '我是修改后的双向绑定数据');

（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. 子组件修改父组件数据注意

子组件可以直接修改父组件传递的 对象中的属性、数组元素，但是，该属性必须是由 父组件传递而来，不能是在子组件中添加的，否则数据能更新，视图不更新。
要在父组件中处理好数据，如下图：

1.PNG

2.PNG

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

1.vue3.0中可以直接修改对象属性和数组元素，也有响应式