Vue3学习笔记（尚硅谷）-VUE学习总结-郭俊杰的知识库

Vue3学习笔记（尚硅谷）

Data: 2019-08-16 02:09:42Form: JournalClick: 10

一、创建vue3工程

1-1、使用vite创建vue3项目


 1. 创建工程
	npm init vite-app 项目名
 2. 进入工程项目
	cd 项目名
 3. 安装依赖
	npm i 
 4. 运行
	npm run dev

1-1、安装开发者工具

谷歌商店搜索vue下载vue.js devtools的beta版本

二、常用Composition API

2-1、setup

理解：Vue3.0中一个新的配置项，值为一个函数。
setup是所有composition API “表演的舞台”。
组件中所用到的数据、方法等，均要配置在setup中。

setup函数的两种返回值：

1.若返回一个对象，则对象中的属性、方法，在模板中均可以直接使用。
2.若返回一个渲染函数，则可以自定义渲染内容（了解）。

注意点：


 1. 尽量不要与vue2的配置项混合使用
	Vue2配置（data 、methds 、computed）中可以访问到setup中的属性、方法。
	但在setup中不能访问到Vue配置的属性方法等（data 、methds 、computed）等。
	如果有重名，setup优先
 2. setup不能是一个asnyc函数，因为返回值不再是一个return对象，而是promise，模板看不到return对象中的属性

2-2、ref函数

作用：定义一个响应式的数据

语法：const xxx = ref（value）

1.创建一个包含响应式数据的引用对象（reference对象，简称ref对象）。
2.JS中操作数据：xxx.value。
3.模板中读取数据：不需要.value直接{{xxx}}。

备注：

1.接收的数据可以使：基本类型、也可以是对象类型。
2.基本类型数据依然是靠Object.defineProperty()的get与set完成的。
3.对象类型的数据：内部求助看Vue3中的一个新函数reactive。

代码：

<template>
  <div>
    <div>个人信息</div>
    <div>姓名：{{ name }}</div>
    <div>姓名：{{ age }}</div>
    <button @click="changeName">改变名字</button>
  </div>
</template>

<script>
import {ref} from 'vue'
export default {
  name: 'App',
  setup(){
    let name = ref('张三')
    let age = ref(22)
    function changeName(){
      name.value = '李四'
      age.value = 44
    }
    return {
      name,
      age,
      changeName
    }
  }
}
</script>


<

`2-3、reactive函数`

作用：定义一个对象类型的响应式数据（基本类型不要用它，用ref函数）
语法：const 代理对象 = reactive（源对象）__ 接受一个对象（或数组），返回一个代理对象（proxy对象）
reactive定义的响应式数据是‘深层次的’
内部基于ES6的Proxy实现，通过代理对象操作源对象内部数据进行操作

代码：

<template>
  <div>
    <h1>个人信息</h1>
    <h2 v-show="person.sex">性别：{{person.sex}}</h2>
    <h2>姓名:{{person.name}}</h2>
    <h2>年龄:{{person.age}}</h2>
    <h3>爱好：
      <span v-for="(like,index) in person.like" :key="index">{{like + '__'}}</span>
    </h3>
    <button @click="addSex">增加性别</button>
    <button @click="delSex">删除性别</button>
    <button @click="changeLike">修改爱好</button>
    <button @click="addLikeSleep">添加睡觉爱好</button>
    <button @click="delFirst">删除第一个爱好</button>
  </div>
</template>

<script>
import {reactive} from 'vue'
export default {
  name: "App",
  setup(){
    // 数据
    let person = reactive({
      name:'刘强',
      age:22,
      like:['抽烟','喝酒','烫头']
    })
    // 方法
    function addSex(){
      person.sex = '男'
    }
    function changeLike(){
      person.like[0] = '学习'
      person.like[1] = '运动'
      person.like[2] = '打球'
    }
    function delSex(){
      person.sex = null
    }
    function addLikeSleep(){
      person.like.push('睡觉')
    }
    function delFirst(){
      person.like.shift()
    }
    return {
      person,
      addSex,
      changeLike,
      delSex,
      addLikeSleep,
      delFirst
    }
  }
};
</script>

`2-4、Vue3的响应式原理`

`2-4-1.Vue2的响应式原理`

实现原理：

对象类型：通过Object.defineProperty()对属性的读取、修改进行拦截（数据劫持）。
数组类型：通过重写更新数组的一系列方法来实现拦截。（对数组的变更方法进行了包裹）。
```
Object.defineProperty(data,'count',{
	get(){},
	set(){}
})
```

存在问题：

新增属性、删除属性、界面不会更新。
直接同股票下表修改数组，界面不会自动更新。

`2-4-3.Vue3的响应式原理`

实现原理：

通过Proxy（代理）：拦截对象中任意属性的变化，包括：属性值的读写、属性的添加、属性的删除等。
通过Reflect（反射）：对被代理对象的属性进行操作。

`2-5、reactive对比ref`

从定义数据角度对比

1.ref用来定义:基本数据类型 。
2.reactive用来定义:对象（或数组）类型的数据。
3.备注:ref也可以用来顶柜对象或者数组类型的数据，它内部会自动通过reactive转为代理对象。

从原理角度对比

1.ref通过ObJECT.defineProperty()的get与set来实现响应式(数据劫持)。
2.reactive通过使用Proxy来实现响应式(数据劫持)，并通过Reflect操作元对象内部的数据。

从使用角度对比

1.ref定义的数据：操作数据需要.value,读取数据时模板中直接读取不需要.value。
2.reactive定义的数据:操作数据与读取数据：均不需要.value。

`2-6、setup的两个注意点`

setup的执行时机

在beforeCreate之前执行一次，this时undefine。

setup的参数

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

`2-7、计算属性与监视`

`2-7-1、computed函数`

与Vue2中computed配置功能一致。
写法

import {reactive,computed} from 'vue'
export default {
  name: "App",
  setup(){
    // 数据
    let person = reactive({
      firstName:'刘',
      lastName:'强',
    })
    // 计算属性(只读)
    // person.fullName = computed(()=>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,
    } 
  }
};
<

`2-7-2、watch函数`

与vue2中watch配置功能一样

两个小坑：

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

	监视reactive定义的响应式数据中某个属性时：deep配置有效

		setup(){
	    // 数据
	    let sum = ref(0)
	    let msg = ref('你好')
	    let person = reactive({
	      name:'张三',
	      age:22,
	      job:{
	        salary:12
	      }
	    })
	    
	    // 情况一：监视一个响应式数据
	    watch(sum,(newValue,oldValue)=>{
	      console.log(newValue,oldValue);
	    },{immediate:true})
	
	    // 情况二：监视多个响应式数据
	    watch([sum,msg],(newValue,oldValue)=>{
	      console.log(newValue,oldValue);
	    },{immediate:true})
	
	    // 情况三：监视reactive所定义的一个响应式数据
	      // 1、注意：此处无法正确的获取oldValue
	      // 1、注意：强制开启了深度监视（deep配置无效）
	    watch(person,(newValue,oldValue)=>{
	      console.log('person变化了',newValue,oldValue);
	    },{deep:false})//此处的deep配置无效
	
	    // 情况四：监视reactive所定义的一个响应式数据中的某一个属性
	    watch(()=>person.age,(newValue,oldValue)=>{
	      console.log('person变化了',newValue,oldValue);
	    },{deep:false})
	
	    // 情况五：监视reactive所定义的多个响应式数据中的某些属性
	    watch([()=>person.age,()=>person.name],(newValue,oldValue)=>{
	      console.log('person的age或者name变化了',newValue,oldValue);
	    },{deep:false})
	
	    // 特殊情况：监视person中的属性中的属性，但是该属性是一个对象
	    watch(()=>person.job,(newValue,oldValue)=>{
	      console.log('person的job变化了',newValue,oldValue);
	    },{deep:true})
	    return {
	      sum,
	      msg,
	      person
	    }
	  }
		```

`2-7-3、watchEffect函数`

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

watchEffect有点像computed：

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

代码：

watchEffect(()=>{
      console.log('watchEffect所指定的回调开启了');
      const sum1 = sum.value
    })

`2-8、vue3的生命周期`

vue2 =====> vue3

 - beforeCreate ===> setup()
 - created =======> setup()
 - beforeMount ===> onBeforeMounted()
 - mounted ======> onMounted()
 - beforeUpdate ==> onBeforeUpdate()
 - updated ======> onUpdated()
 - beforeUnmount => onBeforeUnmount()
 - unMouted =====> onUnmounted()

作用：

 beforecreate ：可以在这函数中初始化加载动画
 created ：做一些数据初始化，实现函数自执行
 mounted： 调用后台接口进行网络请求，拿回数据，配合路由钩子做一些事情
 destoryed ：当前组件已被删除，清空相关内容
 mounted中做网络请求和重新赋值，在destoryed中清空页面数据。

`2-9、自定义hook`

什么是hook？本质上是一个函数，把setup函数中使用的Composition API进行封装。
类似于vue2中的mixin。
自定义hook的优势：复用代码让setup中的逻辑更清楚易懂。


 1. 用法：src下创建hooks文件夹，文件名为use****.js
 2. 例如：
	import {reactive,onMounted, onBeforeUnmount} from 'vue'
	
	export default function(){
	    let point = reactive({
	        x:0,
	        y:0
	      })
	    //   实现鼠标打点
	      function savePoint

我是 PHP 程序员

Vue3学习笔记（尚硅谷）

一、创建vue3工程

1-1、使用vite创建vue3项目

1-1、安装开发者工具

二、常用Composition API

2-1、setup

2-2、ref函数

2-3、reactive函数

2-4、Vue3的响应式原理

2-4-1.Vue2的响应式原理

2-4-3.Vue3的响应式原理

2-5、reactive对比ref

2-6、setup的两个注意点

2-7、计算属性与监视

2-7-1、computed函数

2-7-2、watch函数

2-7-3、watchEffect函数

2-8、vue3的生命周期

2-9、自定义hook