vue3注意事项:setup用法；ref函数和reactive函数使用，shallowReactive及shallowRef使用，toRaw和markRaw使用

**

1.vue3组件中的模板结构可以没有根标签(根据。vue2.o这没有什么错，它可以运行)；

2.安装vue3和vue2开发人员工具(3.o该文件有点没用，我会再寻找更新的)

**
如果当前项目是vue2
谷歌浏览器->右上角的三个点->更多工具->扩展程序->这是vue2开发工具

如果当前项目是vue3
谷歌浏览器->右上角的三个点->更多工具->扩展程序->这是vue3开发工具

vue2和vue3开发人员工具下载地址

**

注：后来发现vue3文件无法打开，因此出现了一个解决方案，即重定向。 vue3使用开发工具

**
1.办公场所、安装vue2的文件；
2.在main.js向文件中添加一段代码；重新启动；自己尝试；
3.下载地址

 * @Description:
 * @Author: zdx
 * @Date: 2021-12-20 11:59:08
 * @LastEditors: zdx
 * @LastEditTime: 2021-12-21 09:05:27
 */
import { createApp } from vue
import App from ./App.vue
createApp(App).mount(#app)

if(__VUE_DEVTOOLS_GLOBAL_HOOK__ in window){
    window.__VUE_DEVTOOLS_GLOBAL_HOOK__.Vue = App
}

**

3.vue3中的setup用法

**

**

4.vue3中的ref反应变量的使用。

**

总结：
想用ref必须引用 ： import { ref } from ‘vue’
如果 let name = ref(‘张三’) 为字符串类型 修改name时要： name.value = ‘王五’ ；
如果let work = ref({name:“前台工程师”})是对象类型，正在修改work当对象中的值为： work.value.name =‘PHP后端开发工程师 ；

与ref还有一个对应的reactive
想用reactive必须引用 ： import { reactive } from ‘vue’
如果let work = reactive({name:“前台工程师”})是对象类型，正在修改work当对象中的值为： work.name =‘PHP后端开发工程师 ；

5. ref和reactive的区别

**

6.shallowReactive理解和使用

**
理解：shallow是浅层的，shallowReactive这意味着第一层监听将不会被监听；

let person = reactive({
    name:张三,
    age:13,
    job:{f1:{salary:30}}
})
//reactive监听到salary

let person = shallowReactive({
    name:张三,
    age:13,
    job:{f1:{salary:30}}
})
//shallowreactive监听到job

**

7.shallowreactive和shallowRef的区别

**

个人理解:shallowReactive监听对象中的第一层不需要深入监听，reactive深度监控，可监听最深处的数据；
ref 通常，基本数据类型(字符串、数字等)都被利用了。如果你很固执，你就会想要利用它们。ref如果您正在处理一组对象，则默认情况下，他会转换这些对象。reactive下；
shallowRef 只处理潜在的 它不听的对象；

**

8.readonly和shallowReadonly区别

readonly：只读，全部为只读，不可修改；
shallowReadonly：只有第一层是只读的，深层可以修改；

**

let person = shallowRef({
            name: "张三",
            age: 13,
            job: { f1: { salary: 30 } },
        });
        readonly(person);
        shallowReadonly(person);

**

9.toRaw和markRaw

**

    name: "Demo",
    setup() {
        let person = reactive({
            name: "张三",
            age: 13,
            job: { f1: { salary: 30 } },
        });
        // toRaw(person);
        function addCar() {
            let car = { name: "奔驰", price: 34 };
            person.car = markRaw(car);
        }
        return {
            person,
            addCar,
        };
    },

总结 ：

自己理解toRaw就是获取最原始的数据；
markRaw就是要去掉反应功能；