vue3注意事项装vue3和vue2开发者工具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用法

**

<template>
  <h1>hello - {{`${name} - ${age}`}}</h1>
  <button @click="sayHello">触发sayHello方法</button>
</template>

<script>

export default {
  name: 'App',
  setup() {
    let name = 'zhangsan'
    let age = 20
    /**
     * sayHello
     * 
     **/
    function sayHello() {
      console.log(`hello ${name}`)
    }

    return{name,age,sayHello}
  }
}
</script>

**

4.vue3中的ref响应式变量的使用方法

**

<template>
  <h1>hello - {{`${name} - ${age} - ${work.name}`}}</h1>
  <button @click="changeName">触发changeName方法</button>
  <button @click="changeWork">触发changeWork方法</button>
</template>

<script>
import { ref } from 'vue'
export default {
  name: 'App',
  setup() {
    let name = ref('里斯')
    let work = ref({name:'前端工程师'})
    function changeName() {
      console.log(name.value = '王五')
      console.log(`hello ${name}`)
    }
    function changeWork() {
      work.value.name ='PHP后端开发工程师'
    }
    return{name,age,work,changeName}
  }
}
</script>

总结：
想用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就是去掉响应式功能；