Vue3

简介

vue3简介 https://github.com/vuejs/vue-next/releases/tag/v3.0.0

使用vue-cli创建工程

官方文档：https://cli.vuejs.org/zh/guide/creating-a-project.html#vue-create

## 查看@vue/cli版本，确保@vue/cli版本在4.5.0以上
vue --version
## 或者使用
vue -V

## 安装或者升级你的@vue/cli
npm install -g @vue/cli

## 创建
vue create vue3_test

# 勾选vue3, 选择npm

## 启动
cd vue3_test
npm run serve

显示Successfully created project vue3_test.说明安装成功了

启动脚手架

页面效果

使用vite创建工程

官方文档：https://v3.cn.vuejs.org/guide/installation.html#vite
vite官网：https://vitejs.cn

## 创建工程
## npm init vite-app vue3_test_vite
npm init vite-app <project-name>

## 进入工程目录
## cd vue3_test_vite
cd <project-name>

## 安装依赖
npm install
## 运行
npm run dev

页面效果:

分析工程结构

这里主要分析的工程是由npm创建的工程, 而不是vite创建出来的工程

main.js

// 引入的不再是Vue构造函数了, 引入的是一个名为createApp的工厂函数
import { createApp } from 'vue'
import App from './App.vue'

// 创建应用实例对象--app(类似于之前Vue2中的vm, 但app比vm更"轻")
const app = createApp(App)
// 挂载
app.mount('#app')
console.log('app', app);

// 一个定时器, 一秒之后就卸载app, 页面也就不展示了
setTimeout(() => {
    app.unmount('#app')
}, 1000)


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

App.vue

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

<script>
import HelloWorld from './components/HelloWorld.vue'

export default {
  name: 'App',
  components: {
    HelloWorld
  }
}
</script>

<style>
#app {
  font-family: Avenir, Helvetica, Arial, sans-serif;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  text-align: center;
  color: #2c3e50;
  margin-top: 60px;
}
</style>

其余的项目结构跟vue2的工程类似

安装开发者工具

建议不要同时开启两个vue.js devtools开发工具, 控制台会提示开启一个, 虽然说两个工具都会亮, 这很神奇

Chrome 网上商店安装地址 https://chrome.google.com/webstore/detail/vuejs-devtools/nhdogjmejiglipccpnnnanhbledajbpd/related?hl=zh-CN

初识setup

setup返回对象

setup的简单使用
return 可以返回一个对象

<template>
  <h1>一个人的信息: </h1>
  <h2>姓名: {{name}}</h2>
  <h2>年龄: {{age}}</h2>
  <button @click="sayHello">说话</button>
</template>

<script>

export default {
  name: 'App',
  // 此处只是测试一个setup, 暂时不考虑响应式的问题
  setup() {
    // 数据
    let name = '张三'
    let age = 18

    // 方法
    function sayHello() {
      alert(`我叫${name}, 我${age}岁了, 你好啊! `)
    }

    return {
      name, 
      age, 
      sayHello
    }

  }
}
</script>

页面效果

setup返回函数

return 也可以返回一个函数

<template>
  <h1>一个人的信息: </h1>
  <h2>姓名: {{name}}</h2>
  <h2>年龄: {{age}}</h2>
  <button @click="sayHello">说话</button>
</template>

<script>
import {h} from "vue";
export default {
  name: 'App',
  // 此处只是测试一个setup, 暂时不考虑响应式的问题
  setup() {
    // 数据
    let name = '张三'
    let age = 18

    // 方法
    function sayHello() {
      alert(`我叫${name}, 我${age}岁了, 你好啊! `)
    }

    // 返回一个对象常用
    /* return {
      name, 
      age, 
      sayHello
    } */

    // 返回一个函数(渲染函数)
    return () => h('h1', '尚硅谷')

  }
}
</script>

页面效果

vue3中使用data, method

在vue3中同样的可以使用data, method

<template>
  <h1>一个人的信息: </h1>
  <h2>姓名: {{name}}</h2>
  <h2>年龄: {{age}}</h2>
  <h2>性别: {{sex}}</h2>
  <button @click="sayHello">说话(Vue3所配置的——sayHello)</button>
  <br>
  <br>
  <button @click="sayWelcome">说话(Vue2所配置的——sayWelcome)</button>
</template>

<script>
// import {h} from "vue";
export default {
  name: 'App',
  data() {
    return {
      sex: '男',
    }
  },
  methods: {
    sayWelcome() {
      alert('欢迎来到尚硅谷学习')
    }
  },
  // 此处只是测试一个setup, 暂时不考虑响应式的问题
  setup() {
    // 数据
    let name = '张三'
    let age = 18

    // 方法
    function sayHello() {
      alert(`我叫${name}, 我${age}岁了, 你好啊! `)
    }

    // 返回一个对象常用
    return {
      name, 
      age, 
      sayHello
    }

    // 返回一个函数(渲染函数)
    // return () => h('h1', '尚硅谷')

  }
}
</script>

页面效果

vue2与vue3互相调用

甚至可以在vue2的方法中调用vue3的setup的属性和方法

<template>
  <h1>一个人的信息: </h1>
  <h2>姓名: {{name}}</h2>
  <h2>年龄: {{age}}</h2>
  <h2>性别: {{sex}}</h2>
  <button @click="sayHello">说话(Vue3所配置的——sayHello)</button>
  <br>
  <br>
  <button @click="sayWelcome">说话(Vue2所配置的——sayWelcome)</button>
  <br>
  <br>
  <button @click="test1">测试一下在Vue2的配置中去读取Vue3中的数据、方法</button>
</template>

<script>
// import {h} from "vue";
export default {
  name: 'App',
  data() {
    return {
      sex: '男',
    }
  },
  methods: {
    sayWelcome() {
      alert('欢迎来到尚硅谷学习')
    },
    test1() {
      console.log(this.sex);
      console.log(this.name);
      console.log(this.age);
      this.sayHello()
    }
  },
  // 此处只是测试一个setup, 暂时不考虑响应式的问题
  setup() {
    // 数据
    let name = '张三'
    let age = 18

    // 方法
    function sayHello() {
      alert(`我叫${name}, 我${age}岁了, 你好啊! `)
    }

    // 返回一个对象常用
    return {
      name, 
      age, 
      sayHello
    }

    // 返回一个函数(渲染函数)
    // return () => h('h1', '尚硅谷')

  }
}
</script>

页面效果

但是在Vue3中不能调用Vue2的属性和方法

<template>
  <h1>一个人的信息: </h1>
  <h2>姓名: {{name}}</h2>
  <h2>年龄: {{age}}</h2>
  <h2>性别: {{sex}}</h2>
  <button @click="sayHello">说话(Vue3所配置的——sayHello)</button>
  <br>
  <br>
  <button @click="sayWelcome">说话(Vue2所配置的——sayWelcome)</button>
  <br>
  <br>
  <button @click="test1">测试一下在Vue2的配置中去读取Vue3中的数据、方法</button>
  <br>
  <br>
  <button @click="test2">测试一下在Vue3的setup配置中去读取Vue2中的数据、方法</button>
</template>

<script>
// import {h} from "vue";
export default {
  name: 'App',
  data() {
    return {
      sex: '男',
    }
  },
  methods: {
    sayWelcome() {
      alert('欢迎来到尚硅谷学习')
    },
    test1() {
      console.log(this.sex);
      console.log(this.name);
      console.log(this.age);
      this.sayHello()
    }
  },
  // 此处只是测试一个setup, 暂时不考虑响应式的问题
  setup() {
    // 数据
    let name = '张三'
    let age = 18

    // 方法
    function sayHello() {
      alert(`我叫${name}, 我${age}岁了, 你好啊! `)
    }

    function test2() {
      console.log(name);
      console.log(age);
      console.log(sayHello);
      console.log(this.sex);
      console.log(this.sayWelcome);
    }

    // 返回一个对象常用
    return {
      name, 
      age, 
      sayHello,
      test2
    }

    // 返回一个函数(渲染函数)
    // return () => h('h1', '尚硅谷')

  }
}
</script>

页面效果

总结: Vue2的配置和Vue3的配置不要混用

当Vue3和Vue2中都存在同一个属性时, 会优先使用Vue3的属性

<template>
  <h1>一个人的信息: </h1>
  <h2>姓名: {{name}}</h2>
  <h2>年龄: {{age}}</h2>
  <h2>性别: {{sex}}</h2>
  <h2>a: {{a}}</h2>
  <button @click="sayHello">说话(Vue3所配置的——sayHello)</button>
  <br>
  <br>
  <button @click="sayWelcome">说话(Vue2所配置的——sayWelcome)</button>
  <br>
  <br>
  <button @click="test1">测试一下在Vue2的配置中去读取Vue3中的数据、方法</button>
  <br>
  <br>
  <button @click="test2">测试一下在Vue3的setup配置中去读取Vue2中的数据、方法</button>
</template>

<script>
// import {h} from "vue";
export default {
  name: 'App',
  data() {
    return {
      sex: '男',
      a: 100
    }
  },
  methods: {
    sayWelcome() {
      alert('欢迎来到尚硅谷学习')
    },
    test1() {
      console.log(this.sex);
      console.log(this.name);
      console.log(this.age);
      this.sayHello()
    }
  },
  // 此处只是测试一个setup, 暂时不考虑响应式的问题
  setup() {
    // 数据
    let name = '张三'
    let age = 18
    let a = 200

    // 方法
    function sayHello() {
      alert(`我叫${name}, 我${age}岁了, 你好啊! `)
    }

    function test2() {
      console.log(name);
      console.log(age);
      console.log(sayHello);
      console.log(this.sex);
      console.log(this.sayWelcome);
    }

    // 返回一个对象常用
    return {
      name, 
      age, 
      sayHello,
      test2,
      a
    }

    // 返回一个函数(渲染函数)
    // return () => h('h1', '尚硅谷')

  }
}
</script>

setup不能是一个async函数

async setup() {...}

总结

1. 理解：Vue3.0中一个新的配置项，值为一个函数。
2. setup是所有Composition API（组合API）“ 表演的舞台 ”。
3. 组件中所用到的：数据、方法等等，均要配置在setup中。
4. setup函数的两种返回值：
   1. 若返回一个对象，则对象中的属性、方法, 在模板中均可以直接使用。（重点关注！）
   2. 若返回一个渲染函数：则可以自定义渲染内容。（了解）
5. 注意点：
   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函数

响应式数据 - 基本类型的数据

<template>
  <h1>一个人的信息: </h1>
  <h2>姓名: {{name}}</h2>
  <h2>年龄: {{age}}</h2>
  <button @click="changeInfo">修改人的信息</button>
</template>

<script>
export default {
  name: 'App',
  setup() {
    // 数据
    let name = '张三'
    let age = 18

    // 方法
    function changeInfo() {
      name = '李四'
      age = 48
      console.log(name, age);
    }

    // 返回一个对象常用
    return {
      name, 
      age,
      changeInfo
    }
  }
}
</script>

此时点击按钮, 控制台输出了修改后的数据, 但是页面并没有发生变化

此时的数据并不是响应式的, 得使用ref函数将数据包裹起来才算是响应式的

<template>
  <h1>一个人的信息: </h1>
  <h2>姓名: {{name}}</h2>
  <h2>年龄: {{age}}</h2>
  <button @click="changeInfo">修改人的信息</button>
</template>

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

    // 方法
    function changeInfo() {
      // name = '李四'
      // age = 48
      console.log(name, age);
    }

    // 返回一个对象常用
    return {
      name, 
      age,
      changeInfo
    }
  }
}
</script>

可以发现控制台输出的内容是一个对象, 并不是一个字符串, 也不是一个数字, 说明不能直接修改这个值
应该修改ref对象的value值来修改数据

<template>
  <h1>一个人的信息: </h1>
  <h2>姓名: {{name}}</h2>
  <h2>年龄: {{age}}</h2>
  <button @click="changeInfo">修改人的信息</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
      console.log(name, age);
    }

    // 返回一个对象常用
    return {
      name, 
      age,
      changeInfo
    }
  }
}
</script>

此时点击按钮, 页面数据修改了

响应式数据 - 对象

RefImpl 相当于两个单词的缩写 reference implement 引用 实现
可以读作 引用实现的实例对象 但是这样读太长了, 直接读作引用对象 或者读 ref对象

ref处理基本数据类型用的是get() set() defineProperty()
但是处理对象类型的数据, 用的是ES6中的Proxy

<template>
  <h1>一个人的信息: </h1>
  <h2>姓名: {{name}}</h2>
  <h2>年龄: {{age}}</h2>
  <h3>工作种类: {{job.type}}</h3>
  <h3>工作薪水: {{job.salary}}</h3>
  <button @click="changeInfo">修改人的信息</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);
      job.value.type = 'UI设计师'
      job.value.salary = '60K'
      // console.log(name, age);
    }

    // 返回一个对象常用
    return {
      name, 
      age,
      job,
      changeInfo
    }
  }
}
</script>

页面效果 , 数据修改了

总结

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

refImpl => reactive => Proxy

reactive函数

取值

使用了reactive之后, 对象取值就不再需要.value了, 可以直接修改对象的值

<template>
  <h1>一个人的信息: </h1>
  <h2>姓名: {{name}}</h2>
  <h2>年龄: {{age}}</h2>
  <h3>工作种类: {{job.type}}</h3>
  <h3>工作薪水: {{job.salary}}</h3>
  <button @click="changeInfo">修改人的信息</button>
</template>

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

    // 方法
    function changeInfo() {
      name.value = '李四'
      age.value = 48
      console.log('job', job);
      job.type = 'UI设计师'
      job.salary = '60K'
      // console.log(name, age);
    }

    // 返回一个对象常用
    return {
      name, 
      age,
      job,
      changeInfo
    }
  }
}
</script>

点击按钮, 页面修改

说明proxy下的属性都是响应式的

对象深层次取值

<template>
  <h1>一个人的信息: </h1>
  <h2>姓名: {{name}}</h2>
  <h2>年龄: {{age}}</h2>
  <h3>工作种类: {{job.type}}</h3>
  <h3>工作薪水: {{job.salary}}</h3>
  <h3>测试的数据c: {{job.a.b.c}}</h3>
  <button @click="changeInfo">修改人的信息</button>
</template>

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

    // 方法
    function changeInfo() {
      name.value = '李四'
      age.value = 48
      console.log('job', job);
      job.type = 'UI设计师'
      job.salary = '60K'
      job.a.b.c = 999
      // console.log(name, age);
    }

    // 返回一个对象常用
    return {
      name, 
      age,
      job,
      changeInfo
    }
  }
}
</script>

点击按钮, 深层次的数据也发生了变化

说明reactive处理对象类型是深层次的

数组

数组同样也采用reactive包裹着, 可以直接通过索引值进行修改

<template>
  <h1>一个人的信息: </h1>
  <h2>姓名: {{name}}</h2>
  <h2>年龄: {{age}}</h2>
  <h3>工作种类: {{job.type}}</h3>
  <h3>工作薪水: {{job.salary}}</h3>
  <h3>爱好: {{hobby}}</h3>
  <h3>测试的数据c: {{job.a.b.c}}</h3>
  <button @click="changeInfo">修改人的信息</button>
</template>

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

    // 方法
    function changeInfo() {
      name.value = '李四'
      age.value = 48
      // console.log('job', job);
      job.type = 'UI设计师'
      job.salary = '60K'
      job.a.b.c = 999
      hobby[0] = '学习'
      // console.log(name, age);
    }

    // 返回一个对象常用
    return {
      name, 
      age,
      job,
      hobby,
      changeInfo
    }
  }
}
</script>

优化掉ref

当使用一旦使用了ref, 想修改值就得.value, 这就显得有点麻烦了
可以将所有的数据直接全部放到一个对象中, 然后将这个对象塞到reactive中, 这样就可以避免了.value的麻烦了, 但都又多了一个对象., 这比.value更语义化了一些QAQ

<template>
  <h1>一个人的信息: </h1>
  <h2>姓名: {{person.name}}</h2>
  <h2>年龄: {{person.age}}</h2>
  <h3>工作种类: {{person.job.type}}</h3>
  <h3>工作薪水: {{person.job.salary}}</h3>
  <h3>爱好: {{person.hobby}}</h3>
  <h3>测试的数据c: {{person.job.a.b.c}}</h3>
  <button @click="changeInfo">修改人的信息</button>
</template>

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

    // 方法
    function changeInfo() {
      person.name = '李四'
      person.age = 48
      person.job.type = 'UI设计师'
      person.job.salary = '60K'
      person.job.a.b.c = 999
      person.hobby[0] = '学习'
    }

    // 返回一个对象常用
    return {
      person,
      changeInfo
    }
  }
}
</script>

点击按钮, 数据发生变化

总结

• 作用: 定义一个对象类型的响应式数据（基本类型不要用它，要用ref函数）
• 语法：const 代理对象= reactive(源对象)接收一个对象（或数组），返回一个代理对象（Proxy的实例对象，简称proxy对象）
• reactive定义的响应式数据是“深层次的”。
• 内部基于 ES6 的 Proxy 实现，通过代理对象操作源对象内部数据进行操作。

回顾Vue2的响应式原理

创建vue2脚手架

创建vue2脚手架

vue create vue2_test_demo

Vue2中属性的添加和删除

使用vue2进行属性的添加和删除需要借助this.$set

<template>
  <div>
    <h1>我是Vue2写的效果</h1>
    <h2 v-show="person.name">姓名: {{person.name}}</h2>
    <h2>年龄: {{person.age}}</h2>
    <h2 v-show="person.sex">性别: {{person.sex}}</h2>
    <h2>爱好: {{person.hobby}}</h2>
    <button @click="addSex">添加一个sex属性</button>
    <button @click="deleteName">删除name属性</button>
    <button @click="updateHobby">修改第一个爱好的名字</button>
  </div>
</template>

<script>
import Vue from 'vue'
export default {
  name: 'App',
  data() {
    return {
      person: {
        name: '张三',
        age: 18,
        hobby: ['学习', '吃饭']
      }
    }
  },
  methods: {
    addSex() {
      // 这种方式进行属性的添加, vue2是监听不到的
      // console.log(this.person.sex); // undefined
      // this.person.sex = '男'
      // console.log(this.person.sex); // 男

      this.$set(this.person, 'sex', '男')
      // Vue.set(this.person, 'sex', '男')

    },
    deleteName() {
      // console.log(this.person.name); // 张三
      // delete this.person.name
      // console.log(this.person.name); // undefined

      // this.$delete(this.person, 'name')
      Vue.delete(this.person, 'name')
    },
    updateHobby() {
      // this.person.hobby[0] = '逛街'  // 这种不行
      // this.$set(this.person.hobby, 0, '逛街')
      this.person.hobby.splice(0, 1, '逛街')
    }
  }
}
</script>

总结

• 实现原理：

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

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

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

• 存在问题：

  • 新增属性、删除属性, 界面不会更新。
  • 直接通过下标修改数组, 界面不会自动更新。

Vue3响应式原理_Proxy

Vue3中属性的添加和删除

但是在vue3进行属性的添加和删除, 则可以直接进行修改, 而不再需要借助this.$set

<template>
  <h1>一个人的信息: </h1>
  <h2 v-show="person.name">姓名: {{person.name}}</h2>
  <h2>年龄: {{person.age}}</h2>
  <h2 v-show="person.sex">性别: {{person.sex}}</h2>
  <h3>工作种类: {{person.job.type}}</h3>
  <h3>工作薪水: {{person.job.salary}}</h3>
  <h3>爱好: {{person.hobby}}</h3>
  <h3>测试的数据c: {{person.job.a.b.c}}</h3>
  <button @click="changeInfo">修改人的信息</button>
  <button @click="addSex">添加一个sex属性</button>
  <button @click="deleteName">删除一个name属性</button>
</template>

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

    // 方法
    function changeInfo() {
      person.name = '李四'
      person.age = 48
      person.job.type = 'UI设计师'
      person.job.salary = '60K'
      person.job.a.b.c = 999
      person.hobby[0] = '学习'
    }

    // 在Vue3中可以直接对象的添加和删除, 并且也是添加和删除的数据也是响应式的
    function addSex() {
      person.sex = '男'
    }
    function deleteName() {
      delete person.name
    }

    // 返回一个对象常用
    return {
      person,
      addSex,
      deleteName,
      changeInfo
    }
  }
}
</script>

模拟Vue2中实现响应式

在Vue2中, 删除一个属性捕获不到, 添加一个属性也捕获不到

尽管p中的name删除了, 但是person中仍然存在name

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>05_Vue3的响应式原理</title>
</head>
<body>
    <script type="text/javascript">
        // 源数据
        let person = {
            name: '张三',
            age: 18
        }

        // 模拟Vue2中实现响应式
        let p = {}
        Object.defineProperty(p, 'name', {
            configurable:true,
            get() { // 有人读取name时调用
                return person.name
            },
            set(value) { // 有人修改name时调用
                console.log('有人修改了name属性, 我发现了, 我要去更新界面! ');
                person.name = value
            }
        })
        Object.defineProperty(p, 'age', {
            get() { // 有人读取age时调用
                return person.age
            },
            set(value) { // 有人修改age时调用
                console.log('有人修改了age属性, 我发现了, 我要去更新界面! ');
                person.age = value
            }
        })
    </script>
</body>
</html>

如果折叠代码之后, 接着敲代码会自动展开可以添加一个 region 和 endregion

//#region 
/* let p = {}...
//#endregion

模拟Vue3中实现响应式

window.Proxy
p可以叫做是代理数据, 也可以叫做是代理对象, person叫源数据

// 源数据
let person = {
    name: '张三',
    age: 18
}

// p可以叫做是代理数据, 也可以叫做是代理对象, person叫源数据
const p = new Proxy(person, {})

添加属性

删除属性, 这样的删除不是响应式的

采用deleteProperty

deleteProperty(target, propName) {
  console.log(`有人删除了p身上的${propName}属性，我要去更新界面了！`)
  return delete target[propName]
}

删除属性, 这样的删除才是响应式的

修改数据

查询数据

Vue3响应式原理_Reflect

引入Reflect

定义一个数据

let obj = {a: 1, b:2}

获取数据中的a

当然也可以使用window.Reflect
对数据的增删改查

当使用Object设置了相同的c属性, 页面控制台将会报错

let obj = {a: 1, b:2}
Object.defineProperty(obj, 'c', {
    get() {
        return 3
    }
})
Object.defineProperty(obj, 'c', {
    get() {
        return 3
    }
})
console.log('@@@');

使用Reflect设置了相同的c属性, 页面控制台不会报错, 并且会执行后续的代码

let obj = {a: 1, b:2}
Reflect.defineProperty(obj, 'c', {
    get() {
        return 3
    }
})
Reflect.defineProperty(obj, 'c', {
    get() {
        return 4
    }
})
console.log('@@@');

Reflect是存在返回值的, true表示这个操作是成功执行了的, false表示是没有执行

let obj = {a: 1, b:2}
const x1 = Reflect.defineProperty(obj, 'c', {
    get() {
        return 3
    }
})
console.log(x1);

const x2 = Reflect.defineProperty(obj, 'c', {
    get() {
        return 4
    }
})
console.log(x2);

console.log('@@@');

Reflect存在的目的是为了简化Object的trycatch操作

let obj = {a: 1, b:2}
try {
    Object.defineProperty(obj, 'c', {
        get() {
            return 3
        }
    })
    Object.defineProperty(obj, 'c', {
        get() {
            return 4
        }
    })
} catch (error) {
    console.log(error);
}

针对Reflect如果代码出现了问题就可以不用trycatch, 直接用返回值加上if判断就是的了

const x1 = Reflect.defineProperty(obj, 'c', {
    get() {
        return 3
    }
})
console.log(x1);

const x2 = Reflect.defineProperty(obj, 'c', {
    get() {
        return 4
    }
})
console.log(x2);

if (x2) {
    console.log('某某某操作成功了');
} else {
    console.log('某某某操作失败了');
}

使用Reflect模拟Vue3中实现响应式

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>05_Vue3的响应式原理</title>
</head>
<body>
    <script type="text/javascript">
        // 源数据
        let person = {
            name: '张三',
            age: 18
        }

        // 模拟Vue2中实现响应式
        //#region 
        /* let p = {}
        Object.defineProperty(p, 'name', {
            configurable:true,
            get() { // 有人读取name时调用
                return person.name
            },
            set(value) { // 有人修改name时调用
                console.log('有人修改了name属性, 我发现了, 我要去更新界面! ');
                person.name = value
            }
        })
        Object.defineProperty(p, 'age', {
            get() { // 有人读取age时调用
                return person.age
            },
            set(value) { // 有人修改age时调用
                console.log('有人修改了age属性, 我发现了, 我要去更新界面! ');
                person.age = value
            }
        }) */
        //#endregion
        
        // 模拟Vue3中实现响应式
        const p = new Proxy(person, {
            get(target, propName) {
                console.log(`有人读取了p身上的${propName}属性`);
                return Reflect.get(target, propName)
            },
            set(target, propName, value) {
                console.log(`有人读取了p身上的${propName}属性, 我要去更新界面了! `);
                Reflect.set(target, propName, value)
            },
            deleteProperty(target, propName) {
				console.log(`有人删除了p身上的${propName}属性，我要去更新界面了！`)
                return Reflect.deleteProperty(target, propName)
            }
        })
        
        let obj = {a: 1, b:2}
        // 通过Object.defineProperty去操作
        /* try {
            Object.defineProperty(obj, 'c', {
                get() {
                    return 3
                }
            })
            Object.defineProperty(obj, 'c', {
                get() {
                    return 4
                }
            })
        } catch (error) {
            console.log(error);
        } */
        
        // 通过Reflect.defineProperty去操作
        /* const x1 = Reflect.defineProperty(obj, 'c', {
            get() {
                return 3
            }
        })
        console.log(x1);

        const x2 = Reflect.defineProperty(obj, 'c', {
            get() {
                return 4
            }
        })
        console.log(x2);

        if (x2) {
            console.log('某某某操作成功了');
        } else {
            console.log('某某某操作失败了');
        } */

        // console.log('@@@');
    </script>
</body>
</html>

测试一下添加属性

总结

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

    • Proxy：https://developer.mozilla.org/zh-CN/docs/Web/JavaScript/Reference/Global_Objects/Proxy

    • Reflect：https://developer.mozilla.org/zh-CN/docs/Web/JavaScript/Reference/Global_Objects/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)
          }
      })
      
      proxy.name = 'tom'   

reactive对比ref

把vue3中的reactive当成vue2的data来用, 里面放基本数据类型
就不用ref来定义基本的数据类型

setup() {
  let data = reactive({
    person: {},
    student: {}
  })
  return {
    data
  }
}

总结

• 从定义数据角度对比：
  • ref用来定义：基本类型数据。
  • reactive用来定义：对象（或数组）类型数据。
  • 备注：ref也可以用来定义对象（或数组）类型数据, 它内部会自动通过reactive转为代理对象。
• 从原理角度对比：
  • ref通过Object.defineProperty()的get与set来实现响应式（数据劫持）。
  • reactive通过使用Proxy来实现响应式（数据劫持）, 并通过Reflect操作源对象内部的数据。
• 从使用角度对比：
  • ref定义的数据：操作数据需要.value，读取数据时模板中直接读取不需要.value。
  • reactive定义的数据：操作数据与读取数据：均不需要.value。

setup的两个注意点

attrs

在vue2脚手架编写代码

App.vue

<template>
  <div class="app">
    <h1>我是Vue2写的效果</h1>
    <Demo msg="你好啊" school="尚硅谷" />
  </div>
</template>

<script>
import Demo from './components/Demo'
export default {
  name: 'App',
  components: {Demo},

}
</script>

<style>
.app {
  background-color: gray;
  padding: 10px;
}
</style>

Demo.vue

<template>
  <div class="demo">
    <h2>我是Demo组件</h2>
  </div>
</template>

<script>
export default {
    name: 'Demo',
    props: ['msg', 'school'],
    mounted() {
        console.log(this);
    }
}
</script>

<style>
.demo {
    background-color: orange;
    padding: 10px;
}
</style>

当子组件props接收了父组件传来的值, 将会在vc中直接体现

如果将props换成只接收msg, 那么不会在vc中直接体现, 而是在$attrs中出现
这也就是如果props没有接收父组件传来的值, 就会由$attrs兜底接收

props: ['msg'],

slot

父组件

<template>
  <div class="app">
    <h1>我是Vue2写的效果</h1>
    <Demo msg="你好啊" school="尚硅谷">
      <span>尚硅谷</span>
    </Demo>
  </div>
</template>

子组件插槽

<template>
  <div class="demo">
    <h2>我是Demo组件</h2>
    <slot></slot>
  </div>
</template>

具名插槽
父组件

<template>
  <div class="app">
    <h1>我是Vue2写的效果</h1>
    <Demo msg="你好啊" school="尚硅谷">
      <template slot="test1">
        <span>尚硅谷</span>
      </template>
      <template slot="test2">
        <span>尚硅谷</span>
      </template>
    </Demo>
  </div>
</template>

子组件

<template>
  <div class="demo">
    <h2>我是Demo组件</h2>
    <slot name="test1"></slot>
    <slot name="test2"></slot>
  </div>
</template>

setup执行的时机

setup比beforeCreate更先执行, setup中不能使用this

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

        // 返回一个对象(常用)
        return {
            person
        }
    }
}
</script>

setup的第一个参数props

父组件传值

<template>
  <Demo msg="你好啊" school="尚硅谷" />
</template>

子组件接收

props: ['msg', 'school'],
setup(props) {
    console.log('---setup---', props);
    //数据
    let person = reactive({
        name: '张三',
        age: 18
    })

    // 返回一个对象(常用)
    return {
        person
    }
}

setup中第一个参数props, 就是props接收到的值
props接收一个值, setup中的props输出的就一个值

setup的第二个参数context

第二个参数context, 包含了attrs, emit, slots

setup(props, context) {
    // console.log('---setup---', props);
    console.log('---setup---', context);
    //数据
    let person = reactive({
        name: '张三',
        age: 18
    })

    // 返回一个对象(常用)
    return {
        person
    }
}

context - attrs

将props注释掉, 可以发现子组件没有接收的值都出现在了attrs中

// props: ['msg', 'school'],

context - emit

父组件的自定义事件

<template>
  <Demo @hello="showHelloMsg" msg="你好啊" school="尚硅谷" />
</template>

<script>
import Demo from './components/Demo'
export default {
  name: 'App',
  components: {Demo},
  setup() {
    function showHelloMsg() {
      alert(`你好啊, 你触发了hello事件, 我收到的参数是: ${value}! `)
    }
    
    return {
      showHelloMsg
    }
  }
}
</script>

子组件触发父组件事件

<template>
  <h1>一个人的信息: </h1>
  <h2>姓名: {{person.name}}</h2>
  <h2>年龄: {{person.age}}</h2>
  <!-- 触发父组件的自定义事件 -->
  <button @click="test">测试触发一下父组件的Hello事件</button>
</template>

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

        // 方法
        function test() {
            context.emit('hello', 666)
        }

        // 返回一个对象(常用)
        return {
            person,
            test
        }
    }
}
</script>

<style>

</style>

在vue3中, 子组件需要绑定父组件的自定义的hello事件, 不然控制台会出现警告
emits: [‘hello’]

context - slots

父组件

<template>
  <Demo @hello="showHelloMsg" msg="你好啊" school="尚硅谷">
    <span>尚硅谷</span>
  </Demo>
</template>

子组件

<template>
  <h1>一个人的信息: </h1>
  <h2>姓名: {{person.name}}</h2>
  <h2>年龄: {{person.age}}</h2>
  <slot></slot>
  <br>
  <button @click="test">测试触发一下父组件的Hello事件</button>

</template>

具名插槽
父组件

<template>
  <Demo @hello="showHelloMsg" msg="你好啊" school="尚硅谷">
    <!-- <template slot="qwe">
      <span>尚硅谷</span>
    </template> -->
    <template v-slot:qwe>
      <span>尚硅谷</span>
    </template>
    <template v-slot:asd>
      <span>尚硅谷</span>
    </template>
  </Demo>
</template>

子组件

<template>
  <h1>一个人的信息: </h1>
  <h2>姓名: {{person.name}}</h2>
  <h2>年龄: {{person.age}}</h2>
  <slot name="qwe"></slot>
  <slot name="asd"></slot>
  <br>
  <button @click="test">测试触发一下父组件的Hello事件</button>

</template>

<script>
import {reactive} from 'vue'
export default {
    name: 'Demo',
    /* beforeCreate() {
        console.log('---beforeCreate---', this);
    }, */
    props: ['msg', 'school'],
    emits: ['hello'],
    setup(props, context) {
        // console.log('---setup---', props);
        // console.log('---setup---', context);
        // console.log('---setup---', context.attrs);  // 相当于Vue2中的$attrs
        // console.log('---setup---', context.emit);   // 触发自定义事件的
        console.log('---setup---', context.slots);
        //数据
        let person = reactive({
            name: '张三',
            age: 18
        })

        // 方法
        function test() {
            context.emit('hello', 666)
        }

        // 返回一个对象(常用)
        return {
            person,
            test
        }
    }
}
</script>

<style>

</style>

总结

• setup执行的时机

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

• setup的参数

  • props：值为对象，包含：组件外部传递过来，且组件内部声明接收了的属性。
  • context：上下文对象
    • attrs: 值为对象，包含：组件外部传递过来，但没有在props配置中声明的属性, 相当于 this.$attrs。
    • slots: 收到的插槽内容, 相当于 this.$slots。
    • emit: 分发自定义事件的函数, 相当于 this.$emit。

computed计算属性

虽然在vue3可以用vue2的写法, 但是非常不建议

<template>
  <h1>一个人的信息: </h1>
  姓: <input type="text" v-model="person.firstName"><br>
  名: <input type="text" v-model="person.lastName"><br>
  <span>全名: {{person.fullName}}</span><br>
  全名: <input type="text" v-model="person.fullName"><br>

</template>

<script>
import {reactive, computed} from 'vue'
export default {
    name: 'Demo',
    // 虽然在vue3可以用vue2的写法, 但是非常不建议
    /* computed: {
        fullName() {
            return this.person.firstName + '-' + this.person.lastName
        }
    }, */
    setup() {
        //数据
        let person = reactive({
            firstName: '张',
            lastName: '三'
        })

        /* person.fullName = computed(() => {
             return person.firstName + '-' + person.lastName 
        }) */

        person.fullName = computed({
            get() {
                return person.firstName + '-' + person.lastName 
            },
            set(value) {
                const nameArr = value.split('-')
                person.firstName = nameArr[0]
                person.lastName = nameArr[1]
            }
        })

        // 返回一个对象(常用)
        return {
            person
        }
    }
}
</script>

总结

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]
        }
    })
}

watch监视

watch监视ref定义的数据

vue2的监视
父组件

<template>
  <Demo />
</template>

<script>
import Demo from './components/Demo'
export default {
  name: 'App',
  components: {Demo},
}
</script>

子组件

<template>
    <h2>当前求和为: {{sum}}</h2>
    <button @click="sum++">点我++</button>
</template>

<script>
import {ref} from 'vue'
export default {
    name: 'Demo',
    watch: {
        // 简写
        /* sum(newValue, oldValue) {
            console.log('sum值变化了', newValue, oldValue);
        } */
        sum: {
            // 立刻执行一次
            immediate: true,
            deep: true,
            handler(newValue, oldValue) {
                console.log('sum值变化了', newValue, oldValue);
            }
        }
    },
    setup() {
        // 数据
        let sum = ref(0)

        // 返回一个对象(常用)
        return {
            sum
        }
    }
}
</script>

vue3的监视
父组件

<template>
  <Demo />
</template>

<script>
import Demo from './components/Demo'
export default {
  name: 'App',
  components: {Demo},
}
</script>

子组件

<template>
    <h2>当前求和为: {{sum}}</h2>
    <button @click="sum++">点我++</button>
    <h2>当前的信息为：{{msg}}</h2>
	<button @click="msg+='!'">修改信息</button>
</template>

<script>
import {ref, watch} from 'vue'
export default {
    name: 'Demo',
    setup() {
        // 数据
        let sum = ref(0)
        let msg = ref('你好啊')

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

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

        // 返回一个对象(常用)
        return {
            sum,
            msg
        }
    }
}
</script>

可以发现当使用了第三个参数{immediate: true}, 会在页面加载完成之后就立即进行监视

watch监视reactive定义的数据

父组件

<template>
  <Demo />
</template>

<script>
import Demo from './components/Demo'
export default {
  name: 'App',
  components: {Demo},
}
</script>

子组件

<template>
    <h2>当前求和为: {{sum}}</h2>
    <h2>当前的信息为：{{msg}}</h2>
    <button @click="sum++">点我++</button>
	<button @click="msg+='!'">修改信息</button>
    <hr>
    <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, ref, watch} from 'vue'
export default {
    name: 'Demo',
    setup() {
        // 数据
        let sum = ref(0)
        let msg = ref('你好啊')
        let person = reactive({
            name: '张三',
            age: 18,
            job: {
                j1: {
                    salary: 20
                }
            }
        })

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

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

        /*
            情况三: 监视reactive所定义的一个响应式数据的全部属性
                1. 注意: 此处无法正确的获取oldValue
                2. 注意: 强制开启了深度监视(deep配置无效)
         */
        /* watch(person, (newValue, oldValue) => {
            console.log('person变化了', newValue, oldValue);
        }, {deep: false})   // 此处的deep配置无效 */

        // 情况四: 监视reactive所定义的一个响应式数据的某个属性
        /* watch(() => person.age, (newValue, oldValue)=>{
            console.log('person的age变化了', newValue, oldValue);
        }) */

        // 情况五: 监视reactive所定义的一个响应式数据的某些属性
        /* watch([() => person.age, () => person.name], (newValue, oldValue)=>{
            console.log('person的name或age变化了', newValue, oldValue);
        }) */

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

        // 返回一个对象(常用)
        return {
            sum,
            msg,
            person
        }
    }
}
</script>

watch时value的问题

父组件

<template>
  <Demo />
</template>

<script>
import Demo from './components/Demo'
export default {
  name: 'App',
  components: {Demo},
}
</script>

子组件

<template>
    <h2>当前求和为: {{sum}}</h2>
    <h2>当前的信息为：{{msg}}</h2>
    <button @click="sum++">点我++</button>
	<button @click="msg+='!'">修改信息</button>
    <hr>
    <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, ref, watch} from 'vue'
export default {
    name: 'Demo',
    setup() {
        // 数据
        let sum = ref(0)
        let msg = ref('你好啊')
        let person = ref({
            name: '张三',
            age: 18,
            job: {
                j1: {
                    salary: 20
                }
            }
        })

        // 这里不能写sum.value
        watch(sum, (newValue, oldValue) => {
            console.log('sum的值变化了', newValue, oldValue);
        })

        // 此时ref定义的数据求助了reactive定义的数据
        /* watch(person.value, (newValue, oldValue) => {
            console.log('person的值变化了', newValue, oldValue);
        }) */
        // person不使用.value, 那么就需要开启深度监视
        watch(person, (newValue, oldValue) => {
            console.log('person的值变化了', newValue, oldValue);
        }, {deep: true})

        // 返回一个对象(常用)
        return {
            sum,
            msg,
            person
        }
    }
}
</script>

注意person是ref定义的数据
person.value此时ref定义的数据求助了reactive定义的数据
person不使用.value, 那么就需要开启深度监视

总结

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

• 两个小“坑”：

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

  //情况一：监视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.job,(newValue,oldValue)=>{
  	console.log('person的job变化了',newValue,oldValue)
  },{immediate:true,deep: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配置有效

watchEffect函数

父组件

<template>
  <Demo />
</template>

<script>
import Demo from './components/Demo'
export default {
  name: 'App',
  components: {Demo},
}
</script>

子组件

<template>
    <h2>当前求和为: {{sum}}</h2>
    <h2>当前的信息为：{{msg}}</h2>
    <button @click="sum++">点我++</button>
	<button @click="msg+='!'">修改信息</button>
    <hr>
    <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, ref, watch, watchEffect} from 'vue'
export default {
    name: 'Demo',
    setup() {
        // 数据
        let sum = ref(0)
        let msg = ref('你好啊')
        let person = reactive({
            name: '张三',
            age: 18,
            job: {
                j1: {
                    salary: 20
                }
            }
        })

        // 监视
        /* watch(sum, (newValue, oldValue) => {
            console.log('sum的值变化了', newValue, oldValue);
        }, {immediate: true}) */

        watchEffect(() => {
            const x1 = sum.value
            const x2 = person.job.j1.salary
            console.log('watchEffect所指定的回调执行了');
        })


        // 返回一个对象(常用)
        return {
            sum,
            msg,
            person
        }
    }
}
</script>

不说监视了谁, 用了谁监视谁

总结

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

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

• watchEffect有点像computed：

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

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

Vue3生命周期

beforeCreate setup name 这些就叫配置项
父组件

<template>
  <button @click="isShowDemo = !isShowDemo">切换隐藏/显示</button>
  <Demo v-if="isShowDemo" />
</template>

<script>
import {ref} from 'vue'
import Demo from './components/Demo'
export default {
  name: 'App',
  components: {Demo},
  setup() {
    let isShowDemo = ref(true)

    return {isShowDemo}
  }
}
</script>

子组件

<template>
    <h2>当前求和为: {{sum}}</h2>
    <button @click="sum++">点我+1</button>
</template>

<script>
import {onBeforeMount, onMounted, onBeforeUpdate, onUpdated,  onBeforeUnmount, onUnmounted, ref} from 'vue'
export default {
    name: 'Demo',
    setup() {
        console.log('---setup---');
        // 数据
        let sum = ref(0)

        // 通过组合式API的形式去使用生命周期钩子
        onBeforeMount(() => {
            console.log('---onBeforeMount---');
        })
        onMounted(() => {
            console.log('---onMounted---');
        })
        onBeforeUpdate(() => {
            console.log('---onBeforeUpdate---');
        })
        onUpdated(() => {
            console.log('---onUpdated---');
        })
        onBeforeUnmount(() => {
            console.log('---onBeforeUnmount---');
        })
        onUnmounted(() => {
            console.log('---onUnmounted---');
        })

        // 返回一个对象(常用)
        return {
            sum
        }
    },

    // beforeCreate setup name 这些就叫配置项
    // 通过配置项的形式使用生命周期钩子
    //#region 
    /* beforeCreate() {
        console.log('---beforeCreate---');
    },
    created() {
        console.log('---created---');
    },
    beforeMount() {
        console.log('---beforeMount---');
    },
    mounted() {
        console.log('---mounted---');
    },
    beforeUpdate() {
        console.log('---beforeUpdate---');
    },
    updated() {
        console.log('---updated---');
    },
    beforeUnmount() {
        console.log('---beforeUnmount---');
    },
    unmounted() {
        console.log('---unmounted---');
    } */
    //#endregion

}
</script>

总结

Vue2生命周期图示

Vue3生命周期图示

1

• Vue3.0中可以继续使用Vue2.x中的生命周期钩子，但有有两个被更名：
  • beforeDestroy改名为 beforeUnmount
  • destroyed改名为 unmounted
• Vue3.0也提供了 Composition API 形式的生命周期钩子，与Vue2.x中钩子对应关系如下：
  • beforeCreate===>setup()
  • created=======>setup()
  • beforeMount ===>onBeforeMount
  • mounted=======>onMounted
  • beforeUpdate===>onBeforeUpdate
  • updated =======>onUpdated
  • beforeUnmount ==>onBeforeUnmount
  • unmounted =====>onUnmounted

自定义hook

App.vue

<template>
  <button @click="isShowDemo = !isShowDemo">切换隐藏/显示</button>
  <Demo v-if="isShowDemo" />
  <hr>
  <Test />
</template>

<script>
import {ref} from 'vue'
import Demo from './components/Demo'
import Test from './components/Test'
export default {
  name: 'App',
  components: {Demo, Test},
  setup() {
    let isShowDemo = ref(true)

    return {isShowDemo}
  }
}
</script>

components/Demo.vue

<template>
    <h2>当前求和为: {{sum}}</h2>
    <button @click="sum++">点我+1</button>
    <hr>
    <h2>当前点击鼠标的坐标为: x: {{point.x}}, y: {{point.y}}</h2>
</template>

<script>
import {ref} from 'vue'
import usePoint from '../hooks/usePoint'
export default {
    name: 'Demo',
    setup() {
        console.log('---setup---');
        // 数据
        let sum = ref(0)

        let point = usePoint()

        // 返回一个对象(常用)
        return {
            sum,
            point
        }
    },
}
</script>

components/Test.vue

<template>
    <h2>当前点击鼠标的坐标为: x: {{point.x}}, y: {{point.y}}</h2>
</template>

<script>
    import usePoint from '@/hooks/usePoint'
    export default {
        name: 'Test',
        setup() {
            let point = usePoint()
            return {point}
        }
    }
</script>

<style>

</style>

hooks/usePoint.js

import {reactive, onMounted, onUnmounted} 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)
    })
    
    onUnmounted(() => {
        window.removeEventListener('click', savePoint)
    })

    return point
}

页面效果:

几种暴露js function的方式

// 第一种
function usePoint() {
  ...
}

export default usePoint

// 第二种
export default function usePoint() {
  ...
}

// 第三种
export default function() {
  ...
}

总结

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

• 类似于vue2.x中的mixin。

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

toRef与toRefs

ref是复制了person对象, toRef是引用了person对象
修改ref返回的对象, 源对象不会变化
但是修改toRef返回的对象, 源对象会随着跟着变化
父组件

<template>
  <button @click="isShowDemo = !isShowDemo">切换隐藏/显示</button>
  <Demo v-if="isShowDemo" />
</template>

<script>
import {ref} from 'vue'
import Demo from './components/Demo'
export default {
  name: 'App',
  components: {Demo},
  setup() {
    let isShowDemo = ref(true)

    return {isShowDemo}
  }
}
</script>

子组件

<template>
    <h4>{{person}}</h4>
    <h2>姓名: {{name}}</h2>
    <h2>年龄: {{age}}</h2>
    <h2>薪资: {{job.j1.salary}}K</h2>
    <button @click="name+='~'">修改姓名</button>
    <button @click="age++">增长年龄</button>
    <button @click="job.j1.salary++">涨薪</button>
</template>

<script>
import {reactive, ref, toRef, toRefs} from 'vue'
export default {
    name: 'Demo',
    setup() {
        // 数据
        let person = reactive({
            name: '张三',
            age: 18,
            job: {
                j1: {
                    salary: 20
                }
            }
        })

        // 这个仅仅是 '张三' 字符串
        // const name1 = person.name
        // console.log('%%%', name1);
        
        // // 这个是引用了16行的person对象的name
        // const name2 = toRef(person.name)
        // console.log('###', name2);

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

        // 返回一个对象(常用)
        return {
            person,
            // 正确写法
            // name: toRef(person, 'name'),
            // age: toRef(person, 'age'),
            // salary: toRef(person.job.j1, 'salary')
            
            // 下面这种写法是不对的, 创建了一个新的ref对象, 用的不是16行定义的person对象了
            // 一旦修改了person.name的值, ref的值会变化, 但是16行定义的对象不会发生变化
            // 总结: ref是复制了person对象, toRef是引用了person对象
            // name: ref(person.name),
            // age: ref(person.age),
            // salary: ref(person.job.j1.salary)

            // toRefs的写法
            // 在一个对象里面通过...去展开另一个对象, 把toRefs()生成的对象, 每一组key value都放在了外面这个对象身上了
            ...toRefs(person)
        }
    }
}
</script>

person和toRef是同时变化的

总结

• 作用：创建一个 ref 对象，其value值指向另一个对象中的某个属性。

• 语法：const name = toRef(person,'name')

• 应用: 要将响应式对象中的某个属性单独提供给外部使用时。

• 扩展：toRefs 与toRef功能一致，但可以批量创建多个 ref 对象，语法：toRefs(person)

shallowReactive与shallowRef

父组件

<template>
  <button @click="isShowDemo = !isShowDemo">切换隐藏/显示</button>
  <Demo v-if="isShowDemo" />
</template>

<script>
import {ref} from 'vue'
import Demo from './components/Demo'
export default {
  name: 'App',
  components: {Demo},
  setup() {
    let isShowDemo = ref(true)

    return {isShowDemo}
  }
}
</script>

子组件

<template>
    <h4>{{x.y}}</h4>
    <!-- x有响应式, 但是y没有响应式 -->
    <button @click="x={y: 888}">点我替换x</button>
    <button @click="x.y++">点我x+1</button>
    <hr>
    <h4>{{person}}</h4>
    <h2>姓名: {{name}}</h2>
    <h2>年龄: {{age}}</h2>
    <h2>薪资: {{job.j1.salary}}K</h2>
    <button @click="name+='~'">修改姓名</button>
    <button @click="age++">增长年龄</button>
    <button @click="job.j1.salary++">涨薪</button>
</template>

<script>
import {reactive, ref, toRef, toRefs, shallowReactive, shallowRef} from 'vue'
export default {
    name: 'Demo',
    setup() {
        // 数据
        // 改成shallowReactive之后薪资改变不了
        // let person = shallowReactive({   //只考虑第一层数据的响应式
        let person = reactive({
            name: '张三',
            age: 18,
            job: {
                j1: {
                    salary: 20
                }
            }
        })

        // ref可以求助于reactive, 但是shallowRef不会去求助于reactive
        let x = shallowRef({    // 就是一个普通的Object对象, y的值不会被修改
        // let x = ref({       // Proxy(Object)
            y: 0
        })

        console.log(x);

        // 返回一个对象(常用)
        return {
            person,
            x,
            ...toRefs(person)
        }
    }
}
</script>

总结

• shallowReactive：只处理对象最外层属性的响应式（浅响应式）。

• shallowRef：只处理基本数据类型的响应式, 不进行对象的响应式处理。

• 什么时候使用?

  • 如果有一个对象数据，结构比较深, 但变化时只是外层属性变化 ===> shallowReactive。
  • 如果有一个对象数据，后续功能不会修改该对象中的属性，而是生新的对象来替换 ===> shallowRef。

readonly与shalloReadonly

父组件

<template>
  <button @click="isShowDemo = !isShowDemo">切换隐藏/显示</button>
  <Demo v-if="isShowDemo" />
</template>

<script>
import {ref} from 'vue'
import Demo from './components/Demo'
export default {
  name: 'App',
  components: {Demo},
  setup() {
    let isShowDemo = ref(true)

    return {isShowDemo}
  }
}
</script>

子组件

<template>
    <h4>当前求和:{{sum}}</h4>
    <button @click="sum++">点我x++</button>
    <hr>
    <h2>姓名: {{name}}</h2>
    <h2>年龄: {{age}}</h2>
    <h2>薪资: {{job.j1.salary}}K</h2>
    <button @click="name+='~'">修改姓名</button>
    <button @click="age++">增长年龄</button>
    <button @click="job.j1.salary++">涨薪</button>
</template>

<script>
import {reactive, ref, toRefs, readonly, shallowReadonly} from 'vue'
export default {
    name: 'Demo',
    setup() {
        // 数据
        let sum = ref(0)
        let person = reactive({
            name: '张三',
            age: 18,
            job: {
                j1: {
                    salary: 20
                }
            }
        })

        // person = readonly(person)
        // person = shallowReadonly(person)
        // sum = readonly(sum)
        // sum = shallowReadonly(sum)


        // 返回一个对象(常用)
        return {
            sum,
            ...toRefs( person )
        }
    }
}
</script>

点击之后修改页面, readonly(person)是深层次的只读

shallowReadonly(person)是浅层次的只读

readonly(sum) 和 shallowReadonly(sum) 都是只读的, sum也没有深层次的数据

总结

• readonly: 让一个响应式数据变为只读的（深只读）。
• shallowReadonly：让一个响应式数据变为只读的（浅只读）。
• 应用场景: 不希望数据被修改时。

toRaw与markRaw

父组件

<template>
  <button @click="isShowDemo = !isShowDemo">切换隐藏/显示</button>
  <Demo v-if="isShowDemo" />
</template>

<script>
import {ref} from 'vue'
import Demo from './components/Demo'
export default {
  name: 'App',
  components: {Demo},
  setup() {
    let isShowDemo = ref(true)

    return {isShowDemo}
  }
}
</script>

子组件

<template>
    <h4>当前求和:{{sum}}</h4>
    <button @click="sum++">点我x++</button>
    <hr>
    <h2>姓名: {{name}}</h2>
    <h2>年龄: {{age}}</h2>
    <h2>薪资: {{job.j1.salary}}K</h2>
    <h3 v-show="person.car">座驾信息: {{person.car}}</h3>
    <button @click="name+='~'">修改姓名</button>
    <button @click="age++">增长年龄</button>
    <button @click="job.j1.salary++">涨薪</button>
    <button @click="showRawPerson">输出最原始的person</button>
    <button @click="addCar">给人添加一台车</button>
    <button :disabled="!person.car" @click="person.car.name+='!'">换车名</button>
    <button :disabled="!person.car"  @click="changePrice">换价格</button>
</template>

<script>
import {reactive, ref, toRefs, toRaw, markRaw} from 'vue'
export default {
    name: 'Demo',
    setup() {
        // 数据
        let sum = ref(0)
        let person = reactive({
            name: '张三',
            age: 18,
            job: {
                j1: {
                    salary: 20
                }
            }
        })

        function showRawPerson() {
            // 此时年龄一直在增长, 但是页面不变
            // p不是响应式, age++了, age值变了, 但页面不会更新
            // person才是响应式的, 想让页面发生变化, 应该修改person
            const p = toRaw(person)
            p.age++
            console.log(p);

            // toRaw只能处理reactive所定义的响应式数据, 不能处理ref定义的数据
            // const sum = toRaw(sum)
            // console.log(sum);
        }

        function addCar() {
            let car = {name: '奔驰', price: 40}
            person.car = markRaw(car)
        }

        function changePrice() {
            person.car.price++
            console.log(person.car.price);
        }


        // 返回一个对象(常用)
        return {
            sum,
            person,
            ...toRefs( person ),
            showRawPerson,
            addCar,
            changePrice
        }
    }
}
</script>

toRaw输出的原始的对象, 而person输出的对象是Proxy代理的对象

ref定义的数据不能使用toRaw(), 会直接报错
toRaw只能处理reactive所定义的响应式数据, 不能处理ref定义的数据

使用了markRaw(car), 尽管价格变了, 但是页面不会发生变化

总结

• toRaw：
  • 作用：将一个由reactive生成的响应式对象转为普通对象。
  • 使用场景：用于读取响应式对象对应的普通对象，对这个普通对象的所有操作，不会引起页面更新。
• markRaw：
  • 作用：标记一个对象，使其永远不会再成为响应式对象。
  • 应用场景:
    1. 有些值不应被设置为响应式的，例如复杂的第三方类库等。
    2. 当渲染具有不可变数据源的大列表时，跳过响应式转换可以提高性能。

customRef

App.vue

<template>
  <input type="text" v-model="keyWord">
  <h3>{{keyWord}}</h3>
</template>

<script>
import {ref, customRef} from 'vue'
export default {
  name: 'App',
  setup() {
    // 自定义一个ref 名为: myRef
    function myRef(value) {
      return customRef((track, trigger) => {
        let timer
          return {
            get() {
              console.log(`有人从myRef这个容器中读取数据了, 我把${value}给他了`);
              track() // 通知Vue追踪value的变化(提前和get商量一下, 让他认为这个value是有用的)
              return value
            },
            set(newValue) {
              console.log(`有人把myRef这个容器中数据改为了: ${newValue}`);
              clearTimeout(timer)
              timer = setTimeout(() => {
                value = newValue
                trigger() // 通知Vue去重新解析模板
              }, 1000);
            }
          }
      })
    }
    // let keyWord = ref('hello') // 使用Vue提供的ref
    let keyWord = myRef('hello')  // 使用程序员自定义的ref

    return {keyWord}
  }
}
</script>

JS中节流与防抖函数
节流函数: 先清除定时器, 再开一个新的定时器
防抖函数: 实现了输入框输入完成后才会触发函数, 防止在不停输入调用函数, 节省资源的浪费

当输入框输入内容, h3标签就延迟一秒显示

总结

• 作用：创建一个自定义的 ref，并对其依赖项跟踪和更新触发进行显式控制。

• 实现防抖效果：

  <template>
  	<input type="text" v-model="keyword">
  	<h3>{{keyword}}</h3>
  </template>
  
  <script>
  	import {ref,customRef} from 'vue'
  	export default {
  		name:'Demo',
  		setup(){
  			// let keyword = ref('hello') //使用Vue准备好的内置ref
  			//自定义一个myRef
  			function myRef(value,delay){
  				let timer
  				//通过customRef去实现自定义
  				return customRef((track,trigger)=>{
  					return{
  						get(){
  							track() //告诉Vue这个value值是需要被“追踪”的
  							return value
  						},
  						set(newValue){
  							clearTimeout(timer)
  							timer = setTimeout(()=>{
  								value = newValue
  								trigger() //告诉Vue去更新界面
  							},delay)
  						}
  					}
  				})
  			}
  			let keyword = myRef('hello',500) //使用程序员自定义的ref
  			return {
  				keyword
  			}
  		}
  	}
  </script>

provide与inject

provide是父组件用来给后代传递数据的
inject是后代组件用来接收数据的

项目结构

父组件
App.vue

<template>
  <div class="app">
    <h3>我是App组件(祖), {{name}}--{{price}}</h3>
    <Child />
  </div>
</template>

<script>
import { reactive, toRefs, provide } from 'vue'
import Child from './components/Child.vue'
export default {
  name: 'App',
  components: {Child},
  setup() {
    let car = reactive({name: '奔驰', price: '40W'})
    provide('car', car) // 给自己的后代组件传递数据
    return {...toRefs(car)}
  }
}
</script>

<style>
  .app {
    background-color: gray;
    padding: 10px;
  }
</style>

子组件

<template>
  <div class="child">
    <h3>我是Child组件(子)</h3>
    <Son />
  </div>
</template>

<script>
import {inject} from 'vue'
import Son from './Son.vue'
export default {
  name: 'Child',
  components: {Son},
  setup() {
    let car = inject('car')
    console.log('car for Child', car);
  }
}
</script>

<style>
  .child {
    background-color: skyblue;
    padding: 10px;
  }
</style>

孙组件

<template>
  <div class="son">
    <h3>我是Son组件(孙), {{car.name}}--{{car.price}}</h3>
  </div>
</template>

<script>
import {inject} from 'vue'
export default {
  name: 'Son',
  setup() {
    const car = inject('car')
    return {car}
  }
}
</script>

<style>
  .son {
    background-color: orange;
    padding: 10px;
  }
</style>

页面效果

总结

• 作用：实现祖与后代组件间通信

• 套路：父组件有一个 provide 选项来提供数据，后代组件有一个 inject 选项来开始使用这些数据

• 具体写法：

  1. 祖组件中：

     setup(){
     	......
         let car = reactive({name:'奔驰',price:'40万'})
         provide('car',car)
         ......
     }

  2. 后代组件中：

     setup(props,context){
     	......
         const car = inject('car')
         return {car}
     	......
     }

响应式数据的判断

App.vue

<template>
  <div class="app">
    <h3>我是App组件</h3>
  </div>
</template>

<script>
import { ref, reactive, toRefs, readonly, isRef, isReactive, isReadonly, isProxy} from 'vue'
export default {
  name: 'App',
  setup() {
    let car = reactive({name: '奔驰', price: '40W'})
    let sum = ref(0)
    let car2 = readonly(car)

    console.log(isRef(sum));
    console.log(isReactive(car));
    console.log(isReadonly(car2));
    console.log(isProxy(car));
    console.log(isProxy(car2)); // readonly处理的数据返回的类型依然是Proxy类型
    console.log(isProxy(sum));
    
    return {...toRefs(car)}
  }
}
</script>

<style>
  .app {
    background-color: gray;
    padding: 10px;
  }
</style>

运行结果:

总结

• isRef: 检查一个值是否为一个 ref 对象
• isReactive: 检查一个对象是否是由 reactive 创建的响应式代理
• isReadonly: 检查一个对象是否是由 readonly 创建的只读代理
• isProxy: 检查一个对象是否是由 reactive 或者 readonly 方法创建的代理

Composition API 的优势

1.Options API 存在的问题

使用传统OptionsAPI中，新增或者修改一个需求，就需要分别在data，methods，computed里修改 。

2.Composition API 的优势

我们可以更加优雅的组织我们的代码，函数。让相关功能的代码更加有序的组织在一起。

Fragment

组件根标签可以不写, 会放到fragment

<template>
  <div class="app">
    <h3>我是App组件</h3>
  </div>
  <div class="app">
    <h3>我是App组件</h3>
  </div>
  <div class="app">
    <h3>我是App组件</h3>
  </div>
</template>

总结

• 在Vue2中: 组件必须有一个根标签
• 在Vue3中: 组件可以没有根标签, 内部会将多个标签包含在一个Fragment虚拟元素中
• 好处: 减少标签层级, 减小内存占用

teleport

主要就是用来控制标签的位置的
App.vue

<template>
  <div class="app">
    <h3>我是App组件</h3>
    <Child />
  </div>
</template>

<script>
import Child from './components/Child'
export default {
  name: 'App',
  components: {Child},
}
</script>

<style>
  .app {
    background-color: gray;
    padding: 10px;
  }
</style>

Child.vue

<template>
  <div class="child">
    <h3>我是Child组件</h3>
    <Son />
  </div>
</template>

<script>
import Son from './Son.vue'
export default {
  name: 'Child',
  components: {Son},
}
</script>

<style>
  .child {
    background-color: skyblue;
    padding: 10px;
  }
</style>

Son.vue

<template>
  <div class="son">
    <h3>我是Son组件</h3>
    <Dialog></Dialog>
  </div>
</template>

<script>
import Dialog from './Dialog.vue'
export default {
  components: { Dialog },
  name: 'Son',
}
</script>

<style>
  .son {
    background-color: orange;
    padding: 10px;
  }
</style>

Dialog.vue

<template>
  <div>
    <button @click="isShow = true">点我弹个窗</button>
    <teleport to="body">
        <div class="mask" v-if="isShow">
            <div class="dialog">
                <h3>我是一个弹窗</h3>
                <h4>一些内容</h4>
                <h4>一些内容</h4>
                <h4>一些内容</h4>
                <button @click="isShow = false">关闭弹窗</button>
            </div>
        </div>
    </teleport>
  </div>
</template>

<script>
import { ref } from "vue";
export default {
    name: 'Dialog',
    setup() {
        let isShow = ref(false)
        return {isShow}
    }
}
</script>

<style>
    .mask {
        /* 遮罩层CSS */
        position: absolute;
        top: 0;bottom: 0;left: 0;right: 0;
        background-color: rgba(0, 0, 0, 0.5);
    }
    .dialog{
        position: absolute;
        top: 50%;
        left: 50%;
        transform: translate(-50%, -50%);
        text-align: center;
        width: 300px;
        height: 300px;
        background-color: green;
    }
</style>

页面效果:

未使用teleport时, dialog的DOM节点在SON组件中, 当嵌套比较深的时候, 这样不太好进行控制样式(比如定位啥的)

使用<teleport to="body">时, 此时dialog的位置就是跟body平级的, 可以对body进行定位, 这样去控制定位比较方便

当然teleport的属性to="body"不一定指向body标签, 也可以用CSS的选择器
例如: <teleport to="#atguigu">

总结

• 什么是Teleport？—— Teleport 是一种能够将我们的组件html结构移动到指定位置的技术。

  <teleport to="移动位置">
  	<div v-if="isShow" class="mask">
  		<div class="dialog">
  			<h3>我是一个弹窗</h3>
  			<button @click="isShow = false">关闭弹窗</button>
  		</div>
  	</div>
  </teleport>

Suspense

App.vue

<template>
  <div class="app">
    <h3>我是App组件</h3>
    <Suspense>
      <template v-slot:default>
        <Child />
      </template>
      <template v-slot:fallback>
        <h3>稍等, 加载中...</h3>
      </template>
    </Suspense>
  </div>
</template>

<script>
  // import Child from './components/Child'  // 静态引入
  import {defineAsyncComponent} from 'vue'  // 异步引入(动态引入)
  const Child = defineAsyncComponent(() => import('./components/Child'))
  export default {
    name: 'App',
    components: {Child},
  }
</script>

<style>
  .app {
    background-color: gray;
    padding: 10px;
  }
</style>

Child.vue

<template>
  <div class="child">
    <h3>我是Child组件</h3>
    {{sum}}
  </div>
</template>

<script>
import {ref} from 'vue'
export default {
  name: 'Child',
  async setup() {
    let sum = ref(0)
    /* return new Promise((resolve, reject) => {
        setTimeout(() => {
            resolve({sum})
        }, 1000)
    }) */
    let p = new Promise((resolve, reject) => {
        setTimeout(() => {
            resolve({sum})
        }, 1000)
    })
    return await p
  }
}
</script>

<style>
  .child {
    background-color: skyblue;
    padding: 10px;
  }
</style>

页面效果就是: 先展示稍等, 之后再展示Child组件

Vue3中的setup, Promise要跟Suspense一块使用

总结

• 等待异步组件时渲染一些额外内容，让应用有更好的用户体验

• 使用步骤：

  • 异步引入组件

    import {defineAsyncComponent} from 'vue'
    const Child = defineAsyncComponent(()=>import('./components/Child.vue'))

  • 使用Suspense包裹组件，并配置好default 与 fallback

    <template>
    	<div class="app">
    		<h3>我是App组件</h3>
    		<Suspense>
    			<template v-slot:default>
    				<Child/>
    			</template>
    			<template v-slot:fallback>
    				<h3>加载中.....</h3>
    			</template>
    		</Suspense>
    	</div>
    </template>

全局API的转移

• Vue 2.x 有许多全局 API 和配置。

  • 例如：注册全局组件、注册全局指令等。

    //注册全局组件
    Vue.component('MyButton', {
      data: () => ({
        count: 0
      }),
      template: '<button @click="count++">Clicked {{ count }} times.</button>'
    })
    
    //注册全局指令
    Vue.directive('focus', {
      inserted: el => el.focus()
    }

• Vue3.0中对这些API做出了调整：

  • 将全局的API，即：Vue.xxx调整到应用实例（app）上

    2.x 全局 API（Vue）	3.x 实例 API (app)
    Vue.config.xxxx	app.config.xxxx
    Vue.config.productionTip	移除
    Vue.component	app.component
    Vue.directive	app.directive
    Vue.mixin	app.mixin
    Vue.use	app.use
    Vue.prototype	app.config.globalProperties

其他改变

• data选项应始终被声明为一个函数。

• 过度类名的更改：

  • Vue2.x写法

    .v-enter,
    .v-leave-to {
      opacity: 0;
    }
    .v-leave,
    .v-enter-to {
      opacity: 1;
    }

  • Vue3.x写法

    .v-enter-from,
    .v-leave-to {
      opacity: 0;
    }
    
    .v-leave-from,
    .v-enter-to {
      opacity: 1;
    }

• 移除keyCode作为 v-on 的修饰符，同时也不再支持config.keyCodes

• 移除v-on.native修饰符

  • 父组件中绑定事件

    <my-component
      v-on:close="handleComponentEvent"
      v-on:click="handleNativeClickEvent"
    />

  • 子组件中声明自定义事件

    <script>
      export default {
        emits: ['close']
      }
    </script>

• 移除过滤器（filter）

  过滤器虽然这看起来很方便，但它需要一个自定义语法，打破大括号内表达式是 “只是 JavaScript” 的假设，这不仅有学习成本，而且有实现成本！建议用方法调用或计算属性去替换过滤器。

• ……

最后

最后