vue3学习笔记（一）

学习笔记（一） vue3项目的创建1、 使用 vue-cli 创建2、 使用 vite 创建 vue3项目内容 与 vue2的差异常用 Composition API（组合式API）setupref函数reactive函数vue3中的响应式原理reactive对比refsetup的两个注意点计算属性与监视watchEffect函数vue3 生命周期自定义hook函数toRef

vue3项目的创建 1、 使用 vue-cli 创建

## 查看@vue/cli版本，确保@vue/cli版本在4.5.0以上
vue --version
## 安装或者升级你的@vue/cli
npm install -g @vue/cli
## 创建
vue create vue_test
## 启动
cd vue_test
npm run serve

2、 使用 vite 创建 vue官方文档vite官网

（1）什么是vite？—— 新一代前端构建工具。（和webpack一类）

（2）优势：

   - 开发环境中，无需打包 *** 作，可快速的冷启动。
   - 轻量快速的热重载（HMR）。
   - 真正的按需编译，不再等待整个应用编译完成。

（3）传统构建 与 vite构建对比图


（4）创建步骤

## 创建工程
npm init vite-app <project-name>
## 进入工程目录
cd <project-name>
## 安装依赖
npm install
## 运行
npm run dev

vue3项目内容 与 vue2的差异

1、main.js

vue3引入的不再是Vue的构造函数了，引入的是一个名为createApp的工厂函数（无需通过new关键字调用）

vue3：

import { createApp } from 'vue'
import App from './App.vue'

createApp(App).mount('#app')
// 相当于：
// 创建应用实例对象--app（类似于vue2中的vm，但app比vm更轻，没有那么多的属性和方法）
// const app = createApp(App)
// 挂载
// app.mount('#app')

vue2：

 new Vue({
     render: h => h(App)
 }).$mount('#app')
//相当于：
 /*const vm = new Vue({
     render: h => h(App)    
 })
 vm.$mount('#app')*/

2、App.vue

组件中的模板结构可以没有根标签 :

<template>
  <img alt="Vue logo" src="./assets/logo.png">
  <HelloWorld msg="Welcome to Your Vue.js App"/>
</template>

常用 Composition API（组合式API）

官方文档

setup

Vue3.0中一个新的配置项，值为一个函数。

setup是所有Composition API（组合API）“ 表演的舞台 ”。组件中所用到的：数据、方法等等，均要配置在setup中。setup函数的两种返回值：
(1) 若返回一个对象，则对象中的属性、方法, 在模板中均可以直接使用。（重点关注！）

<template>
  <h1>app</h1>
  <h2>{{name}}</h2>
  <h2>{{age}}</h2>
  <button @click="sayHello">你好</button>
</template>

<script>

  export default {
    name: 'App',
    setup() {
      // 数据
      let name = '张三'
      let age = 18
      // 方法
      function sayHello() {
        alert(`我叫${name},我${age}岁了，你好啊`)
      }

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

(2) 若返回一个渲染函数：则可以自定义渲染内容。（了解）

渲染函数是指vue2中使用的h：render: h => h(App)
在这里使用时，需要从vue中引入

<template>
  <h1>app</h1>
  <h2>{{name}}</h2>
  <h2>{{age}}</h2>
  <button @click="sayHello">你好</button>
</template>

<script>
  import {h} from 'vue'       //要从vue中引入h
  export default {
    name: 'App',
    setup() {
      // 数据
      let name = '张三'
      let age = 18
      // 方法
      function sayHello() {
        alert(`我叫${name},我${age}岁了，你好啊`)
      }
      
      return () => h('h1','尚硅谷')
    }
  }
</script>

此时，页面上只会显示尚硅谷

注意点：

（1）尽量不要与Vue2.x配置混用

Vue2.x配置（data、methos、computed…）中可以访问到setup中的属性、方法。但在setup中不能访问到Vue2.x配置（data、methos、computed…）。如果有重名, setup优先。

（2）setup不能是一个async函数，因为返回值不再是return的对象, 而是promise, 模板看不到return对象中的属性。（后期也可以返回一个Promise实例，但需要Suspense和异步组件的配合）

ref函数 作用: 定义一个响应式的数据使用前先引入 import { ref } from 'vue'语法: const xxx = ref(initValue) 创建一个包含响应式数据的引用对象（reference对象，简称ref对象）。JS中 *** 作数据： xxx.value模板中读取数据: 不需要.value，直接：{{xxx}} 备注： 接收的数据可以是：基本类型、也可以是对象类型。基本类型的数据：响应式依然是靠Object.defineProperty()的get与set完成的。对象类型的数据：内部 “ 求助 ” 了Vue3.0中的一个新函数—— reactive函数（将Proxy *** 作封装在了reactive函数中）。

解释：

1、上节中直接在setup()中直接写 let name = ‘张三’，并不是响应式的。直接修改name值页面上的值并不会变化

ref 函数可以定义一个响应式的数据，数据的格式为：

setup() {
      // 数据
      let name = ref('张三')
      let age = ref(18)
      function changeInfo() {
        console.log(name)
        console.log(age)
        //name = '李四'  //更新不起作用
        //age = 48
      }
      return {
        name,
        age,
        changeInfo
      }
    }

更新数据的正确方式：

<template>
  <h2>{{name}}</h2>
  <h2>{{age}}</h2>
  <button @click="changeInfo">change</button>
</template>

<script>
  import { ref } from "vue";
  export default {
    name: 'App',
    setup() {
      // 数据
      let name = ref('张三')
      let age = ref(18)

      function changeInfo() {
        name.value = '李四'
        age.value = 48
      }
      return {
        name,
        age,
        changeInfo
      }
    }
  }
</script>

2、对于对象类型的数据，应该如何修改呢

<template>
  <h2>{{job.type}}</h2>
  <h2>{{job.salary}}</h2>
  <button @click="changeInfo">change</button>
</template>

<script>
  import { ref } from "vue";
  export default {
    name: 'App',
    setup() {
      // 数据
      let name = ref('张三')
      let age = ref(18)
      let job = ref({
        type:'前端工程师',
        salary:'30K'
      })

      function changeInfo() {
        name.value = '李四'
        age.value = 48
        console.log(job.value)
        //job.value.type = 'UI'
        //job.value.salary = '40K'
      }
      return {
        name,
        age,
        job,
        changeInfo
      }
    }
  }
</script>

console.log(job.value)打印出来是：

所以在修改时应该写：job.value.type = 'UI'

reactive函数 作用: 定义一个对象类型的响应式数据（基本类型不要用它，要用ref函数）也需要引入：import { reactive } from "vue"语法：const 代理对象= reactive(源对象)接收一个对象（或数组），返回一个代理对象（Proxy的实例对象，简称proxy对象）reactive定义的响应式数据是“深层次的”。（对象内部的对象也会被监测到）内部基于 ES6 的 Proxy 实现，通过代理对象 *** 作源对象内部数据进行 *** 作。（数据劫持）

示例：

1、用这种方式定义的对象，可以直接用对象名访问，不用加.value

let job = reactive({
        type:'前端工程师',
        salary:'30K'
      })
function changeInfo() {
        console.log(job)
      }

此时更改数据：

function changeInfo() {
        // console.log(job)
        job.type = 'UI'
        job.salary = '40K'
      }

2、reactive也可以用于数组，并且可以使用索引的方式响应式的修改数据

let hobby = ['抽烟','喝酒','烫头']

function changeInfo() {
        ......
        hobby[0] = '学习'
      }

3、为了简化，可以把多个属性抽成一个对象

<script>
  import { reactive } from "vue";
  export default {
    name: 'App',
    setup() {
      let person = reactive({
        name :'张三',
        age: 18,
        job:{
          type:'前端工程师',
          salary:'30K',
          a:{
            b:{
              c:999
            }
          },
        },
        hobby:['抽烟','喝酒','烫头']
      })

      function changeInfo() {
        person.name = '李四'
        person.age = 48
        person.job.type = 'UI'
        person.job.salary = '40K'
        person.job.a.b.c = 88
        person.hobby[0] = '学习'
      }
      return {
        person,
        changeInfo
      }
    }
  }
</script>

vue3中的响应式原理

1、 vue2.x的响应式

实现原理：

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

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

 Object.defineProperty(data, 'count', {
    get () {}, 
    set () {}
})

存在问题： 新增属性、删除属性, 界面不会更新。（新增属性的时候需要用this.$set或者Vue.set，移除属性的时候用this.$delete）直接通过下标修改数组, 界面不会自动更新。

2、Vue3.0的响应式

（1）示例：

	<script>
        // 数据
        let person = {
            name :'张三',
            age: 18,
        }
        const p = new Proxy(person,{})
    </script>

此时修改p, person中的内容也会随之变化。但此时还不是真正的响应式，还需完善{}中的内容

（2）完善const p = new Proxy(person,{})大括号中的内容

	const p = new Proxy(person,{
            // 读取p的某个属性时调用
            get(target,propName){
                console.log(`有人读取了p身上的${propName}属性`)
                return target[propName]     // []可以用变量作为属性名访问对象中的属性，点方法不可以
            },
            // 修改p的属性或给p增加某个属性时调用
            set(target,propName,value){
                console.log(`有人修改了p身上的${propName}属性，我要更新页面`)
                target[propName] = value
            },
            // 删除p的某个属性时调用
            deleteProperty(target,propName){
                console.log(`有人删除了p身上的${propName}属性，我要更新页面`)
                return delete target[propName]
            }
        })

但是这种修改属性值的方式（target[propName]）存在一定的缺陷：

（3）Object.defineProperty 和 反射对象Reflect 两种方式对比

		let obj = {a:1, b:2}
        // 通过Object.defineProperty *** 作，必须要用try catch来捕获错误
        try {
            Object.defineProperty(obj,'c',{
                get(){
                    return 3
                }
            })
            Object.defineProperty(obj,'c',{    //执行到这里会报错，不能重复声明相同的变量
                get(){
                    return 4
                }
            })
        } catch (error) {
            console.log(error);
        }

// 通过反射对象Reflect *** 作
        const x1 = Reflect.defineProperty(obj, 'c', {
            get(){
                    return 3
                }
        })
        console.log(x1);   // true
        
        const x2 = Reflect.defineProperty(obj, 'c', {    //执行到这里不会报错，但c返回的结果是第一次的值，即3
            get(){
                    return 4
                }
        })
        console.log(x2);    // false

为了更好地捕获错误，vue3 在修改属性时使用的是反射对象。（2）中的内容调整为：

	const p = new Proxy(person,{
            // 读取p的某个属性时调用
            get(target,propName){
                console.log(`有人读取了p身上的${propName}属性`)
                return Reflect.get(target,propName)
            },
            // 修改p的属性或给p增加某个属性时调用
            set(target,propName,value){
                console.log(`有人修改了p身上的${propName}属性，我要更新页面`)
                // target[propName] = value
                Reflect.set(target,propName,value)
            },
            // 删除p的某个属性时调用
            deleteProperty(target,propName){
                console.log(`有人删除了p身上的${propName}属性，我要更新页面`)
                // return delete target[propName]
                return Reflect.deleteProperty(target,propName)
            }
        })

（4）总结—实现原理:

通过Proxy（代理）: 拦截对象中任意属性的变化, 包括：属性值的读写、属性的添加、属性的删除等。通过Reflect（反射）: 对源对象的属性进行 *** 作。MDN文档中描述的Proxy与Reflect：

Proxy

Reflect

new Proxy(data, {
	// 拦截读取属性值
    get (target, prop) {
    	return Reflect.get(target, prop)
    },
    // 拦截设置属性值或添加新属性
    set (target, prop, value) {
    	return Reflect.set(target, prop, value)
    },
    // 拦截删除属性
    deleteProperty (target, prop) {
    	return Reflect.deleteProperty(target, prop)
    }
})

reactive对比ref 从定义数据角度对比： ref用来定义：基本类型数据。reactive用来定义：对象（或数组）类型数据。备注：ref也可以用来定义对象（或数组）类型数据, 它内部会自动通过reactive转为代理对象。常用的还是reactive，对于基本数据类型可以将其封装到一个对象中。如果有多个对象，可以新建一个data对象，把多个对象放到data对象中，最后把data交出去即可。 从原理角度对比： ref通过Object.defineProperty()的get与set来实现响应式（数据劫持）。reactive通过使用Proxy来实现响应式（数据劫持）, 并通过Reflect *** 作源对象内部的数据。 从使用角度对比： ref定义的数据： *** 作数据需要.value，读取数据时模板中直接读取不需要.value。reactive定义的数据： *** 作数据与读取数据：均不需要.value。 setup的两个注意点

补充——在vue2中：

（1）对于组件中传的数据 ，如果 Demo 中使用了 props 接收，则msg这个值会直接出现在 VC 身上，在模板中可以直接使用{{ msg }}。如果没有用 props接收，则这个值会出现在$attrs中，可以使用 {{$attrs.msg}}。但是$attrs不能限制接收值的类型。

（2）插槽——父组件如果在子组件中 插入了某些内容 hi，无论子组件Demo中写没写 ，中间的这段内容会在 VC上的 $slots 属性中 一数组的形式出现。

1、 setup执行的时机

在beforeCreate之前执行一次，this是undefined。

<script>
  import { reactive } from "vue";
  export default {
    name: 'Demo',
    setup() {
      console.log('----setup----' , this);
      let person = reactive({
        name :'张三',
        age: 18,
    })
      return {
        person,
      }
    },
    beforeCreate(){
        console.log('---beforeCreate---');
    }
  }
</script>

先输出的是 setup，并且此时的 this 是 undefined:

2、 setup的参数（一共有两个参数）

（1）props：值为对象，包含：组件外部传递过来，且组件内部声明接收了的属性。

App.vue:

<template>
  <Demo msg = '你好啊'/>
</template>

Demo.vue:

	<script>
	  import { reactive } from "vue";
	  export default {
	    name: 'Demo',
	    props:['msg'],     // 这里要接收，才能在setup()的参数中写，否则会报错
	    setup(props, context) {
	      console.log('----setup----',props)
	      let person = reactive({
	        name :'张三',
	        age: 18,
	    })
	      return {
	        person,
	      }
	    },
	  }
	</script>

输出：

（2） context：上下文对象

输出context：

attrs: 值为对象，包含：组件外部传递过来，但没有在props配置中声明的属性, 相当于 this.$attrs。

	<script>
	  import { reactive } from "vue";
	  export default {
	    name: 'Demo',
	    // props:['msg'],
	    emits:['hello'],
	    setup(props, context) {
	      console.log('----setup----',props);
	      console.log('----setup----',context);
	      console.log('----setup----',context.attrs);
	      let person = reactive({
	        name :'张三',
	        age: 18,
	      })
	      return {
	        person
	      }
	    },
	  }
	</script>

如果不用props接受的话，传过来的值会存在 context中的 attr 下：

slots: 收到的插槽内容, 相当于 this.$slots。

<template>
  <Demo @hello="showHelloMsg" msg = '你好啊'>
      <span>hello</span>
  </Demo>
</template>

setup(props, context) {
      console.log('----setup----',context.slots);
      ......
    },

如果是具名插槽，为了接口兼容性，尽量不用 slot="xxx"，使用v-slot:xxx

<template>
  <Demo @hello="showHelloMsg" msg = '你好啊'>
    <template v-slot:qwe>
      <span>hello</span>
    </template>
  </Demo>
</template>

emit: 分发自定义事件的函数, 相当于 this.$emit。先用emits:['xxx']接收，setup(props,context)中context.emit('xxx', 参数)触发

App.vue—给子组件绑定自定义事件

<template>
  <Demo @hello="showHelloMsg" msg = '你好啊'/>
</template>

<script>
  export default {
    ......
    setup() {
      function showHelloMsg(value){
        alert(`你好，触发了hello事件，我收到的参数是${value}`)
      }
      return{
        showHelloMsg
      }
    }
  }
</script>

Demo.vue

<template>
  <button @click="test">触发hello事件</button>
</template>

<script>
  export default {
    name: 'Demo',
    props:['msg'],
    emits:['hello'],           //注意：这里的自定义事件，要用 emits 来接收后才能用！！！
    setup(props, context) {
      let person = reactive({
        name :'张三',
        age: 18,
      })
      function test(){
          context.emit('hello',666)
      }
      return {
        person,
        test
      }
    },
  }
</script>

计算属性与监视

1、computed函数

与Vue2.x中computed配置功能一致

写法

import {computed} from 'vue'

setup(){
    ...
	//计算属性——简写（忽略了计算属性的修改）
    let fullName = computed(()=>{
        return person.firstName + '-' + person.lastName
    })
    //计算属性——完整
    let fullName = computed({
        get(){
            return person.firstName + '-' + person.lastName
        },
        set(value){
            const nameArr = value.split('-')
            person.firstName = nameArr[0]
            person.lastName = nameArr[1]
        }
    })
}

也可以直接往对象身上添加 计算属性。person.fullName = computed(()=>{ return person.firstName + '-' + person.lastName })

2、watch函数

与Vue2.x中watch配置功能一致

//情况一：监视ref定义的响应式数据
watch(sum,(newValue,oldValue)=>{
	console.log('sum变化了',newValue,oldValue)
},{immediate:true})

//情况二：监视多个ref定义的响应式数据
watch([sum,msg],(newValue,oldValue)=>{
	console.log('sum或msg变化了',newValue,oldValue)
}) 

/* 情况三：监视reactive定义的一个响应式数据的全部属性
			若watch监视的是reactive定义的响应式数据，则无法正确获得oldValue！！
			若watch监视的是reactive定义的响应式数据，则强制开启了深度监视 
*/
watch(person,(newValue,oldValue)=>{
	console.log('person变化了',newValue,oldValue)
},{immediate:true,deep:false}) //此处的deep配置不再奏效

//情况四：监视reactive定义的响应式数据中的某个属性
watch(()=>person.name,(newValue,oldValue)=>{
	console.log('person的job变化了',newValue,oldValue)
},{immediate:true}) 

//情况五：监视reactive定义的响应式数据中的某些属性(使用数组)
watch([()=>person.job,()=>person.name],(newValue,oldValue)=>{
	console.log('person的job变化了',newValue,oldValue)
},{immediate:true,deep:true})

//特殊情况
watch(()=>person.job,(newValue,oldValue)=>{
    console.log('person的job变化了',newValue,oldValue)
},{deep:true}) //此处由于监视的是reactive所定义的对象中的某个属性(它是个对象)，所以deep配置有效

情况二：监视多个ref定义的响应式数据。是把多个属性的新值和旧值分别放在两个数组里：

两个小“坑”：

监视reactive定义的响应式数据的全部属性时（person）：oldValue无法正确获取、强制开启了深度监视（deep配置失效）。

输出的新旧值相同，也就是无法获取 oldValue。监视reactive定义的响应式数据中某个属性（对象）时：deep配置有效。
person下的job是一个对象，job:{ j1:{ salary:20}} 如果此时 watch(() => person.job, {...}) ,当 salary发生变化时 监听不到，必须要加 watch(() => person.job, {...}, {deep : true}) 。

补充：
使用 ref 来 定义基本数据类型和对象

let sum = ref(0)
let person = ref({
            name:'张三',
            age:18
        })

（1）在使用 watch 时，基本数据类型 不需要加 .value。因为 sum中存的是基本类型的值，如果写了 sum.value，相当于是 watch( 0 ,(newValue,oldValue)=>{...})

watch(sum,(newValue,oldValue)=>{
	console.log('sum变化了',newValue,oldValue)
})

（2）在监听 用 ref 定义的对象时，有两种方式

使用 person.value ，此时的 person.value 是指 refImp 对象下的 Proxy 对象(ref 会把对象 进行reactive的转换)

watch(person.value,(newValue,oldValue)=>{
	console.log('person变化了',newValue,oldValue)
}) 

开启深度监视

watch(person,(newValue,oldValue)=>{
	console.log('person变化了',newValue,oldValue)
},{deep:true}) 

watchEffect函数

watch的套路是：既要指明监视的属性，也要指明监视的回调。

watchEffect的套路是：不用指明监视哪个属性，监视的回调中用到哪个属性，那就监视哪个属性。

watchEffect有点像computed：

但computed注重的计算出来的值（回调函数的返回值），所以必须要写返回值。而watchEffect更注重的是过程（回调函数的函数体），所以不用写返回值。

//watchEffect所指定的回调中用到的数据只要发生变化，则直接重新执行回调。
watchEffect(()=>{
    const x1 = sum.value
    const x2 = person.age
    console.log('watchEffect配置的回调执行了')
})

vue3 生命周期

1、Vue3.0中可以继续使用Vue2.x中的生命周期钩子，但有有两个被更名：（通过配置项的形式使用生命周期钩子，与vue2写法一致）

beforeDestroy改名为 beforeUnmountdestroyed改名为 unmounted

2、Vue3.0也提供了 Composition API 形式的生命周期钩子(写在 setup(){}中)，与Vue2.x中钩子对应关系如下：

beforeCreate===>setup()created=======>setup()beforeMount ===>onBeforeMountmounted=======>onMountedbeforeUpdate===>onBeforeUpdateupdated =======>onUpdatedbeforeUnmount ==>onBeforeUnmountunmounted =====>onUnmounted

	setup() {   
		......   
		// 通过组合式API的形式使用
        onBeforeMount(() => {
          console.log('---onBeforeMount---');
        })
        onMounted(() => {
          console.log('---onMounted---');
        })
		....
        return {
            .....
        }
    },

自定义hook函数

1、什么是hook？—— 本质是一个函数，把setup函数中使用的Composition API进行了封装。

2、类似于vue2.x中的mixin。

3、自定义hook的优势: 复用代码, 让setup中的逻辑更清楚易懂。

应用实例：实现点击鼠标，获取它的坐标并显示出来的功能

（1）如果都写在 setup 中

	setup() {
        let sum = ref(0)
        let point = reactive({
          x:0,
          y:0
        })
        function savePoint(event){
          point.x = event.pageX
          point.y = event.pageY
          console.log(event.pageX, event.pageY);
        }
        onMounted(() => {
            window.addEventListener('click', savePoint)
        })
        onBeforeUnmount(() => {
          window.removeEventListener('click',savePoint)
        })
        return {
            sum,
            point
        }
    },

注意，在移除事件监听的时候参数要包括事件及对应的回调。所以，如果在addEventListener 中直接写回调（savePoint中的内容）的话，那么在removeEventListener有需要重新写一遍这个回调。因此，可以把 回调函数 写成一个savePoint函数放在外面。

如果别的组件也想使用这个功能怎么办？ 可以把实现这一功能的代码提取出来，成为hook函数。（类似于 minxin）

（2）新建 src/ hooks / usePoint.js （注意，这里的文件命名 通常用 use + 功能 的格式）
此处记得要 return 想使用的值

import {  onBeforeUnmount, onMounted, reactive } from "vue";
// 鼠标打点
export default function () {
     // 数据
     let point = reactive({
        x:0,
        y:0
      })
      function savePoint(event){
        point.x = event.pageX
        point.y = event.pageY
        console.log(event.pageX, event.pageY);
      }
      onMounted(() => {
          window.addEventListener('click', savePoint)
      })
      onBeforeUnmount(() => {
        window.removeEventListener('click',savePoint)
      })
    return point
}

在Demo.vue中使用：
引入的时候 也尽量用 useXXX的形式

  import usePoint from '../hooks/usePoint'
  .....
  setup() {
        let point = usePoint()
        return {
            point
        }
    },

toRef

1、作用：创建一个 ref 对象，其value值指向另一个对象中的某个属性。
2、语法：const name = toRef(person,'name')
3、应用: 要将响应式对象中的某个属性单独提供给外部使用时。
4、扩展：toRefs与toRef功能一致，但可以批量创建多个 ref 对象，语法：toRefs(person)

实例：
（1）以前模板对于对象的使用，每次在属性前都要加 person.xxx:

	<template>
	  <h2>姓名：{{person.name}}</h2>
	  <h2>年龄：{{person.age}}</h2>
	  <h2>薪资：{{person.job.j1.salary}}K</h2>
	  <button @click="person.name += '~'">修改姓名</button>
	  <button @click="person.age++">修改年龄</button>
	  <button @click="person.job.j1.salary++">涨薪</button>
	</template>
	<script>
	  import { reactive } from "vue";
	  export default {
	    name: 'Demo',
	    setup() {
	        let person = reactive({
	            name:'张三',
	            age:18,
	            job:{
	                j1:{
	                    salary:20
	                }
	            }
	        })
	        return {
	          person
	        }
	    },
	  }
</script>

（2）如果在return时指定各个元素，在模板中可以直接使用，如{{ name }}。但此时修改数据页面并不会发生变化。因为这是相当于 重新创建了一个变量 name，person.name是一个字符串，将其赋值给了name，所以 name 并不是响应式的。此种方法不可行。

  return {
          name:person.name,
          age:person.age,
          salary:person.job.j1.salary
        }

（3）先来看 toRef 的作用（把一个变量 变成响应式的，读取的是对象中的某个值）：

<script>
  import { reactive, toRef } from "vue";
  export default {
    setup() {
        ......
        const name1 = person.name
        console.log('%%%', name1);
        const name2 = toRef(person,'name')
        console.log('###', name2);
		......
    },
  }
</script>

（4）正确的打开方式：

	return {
          name:toRef(person,'name'),
          age:toRef(person,'age'),
          salary:toRef(person.job.j1,'salary')   //注意这里多层嵌套的写法
        }

（5）补充 toRefs

		const x = toRefs(person)
        console.log('---', x);

它会把对象的每个属性 都设成 ref对象，并为其设置Proxy（响应式）：

因此，（4）中的使用可以改成：

return {
          ...toRefs(person)
        }

因为 toRefs(person) 里面是多个对象，所以使用 … 把它展开
需要注意的是，job是一个多层的对象 ，展开的时候也只能展开到job。所以 模板中使用时 需要{{ job. j1. salary }}