Vue3学习笔记

最新推荐文章于 2022-12-13 20:10:30 发布

zyl83721

最新推荐文章于 2022-12-13 20:10:30 发布

阅读量183

点赞数

文章标签： vue.js javascript 前端

本文链接：https://blog.csdn.net/m0_73095627/article/details/128252603

版权

一、创建Vue3.0工程

1.1、使用vue-cli创建

vue -V //查看版本
npm install -g vue-cli //安装脚手架
vue create item //创建名称为item的项目
cd item //进入item目录
npm run serve //启动

1.2、使用vite创建

npm init vite-app item //创建名称为item的项目
cd item //进入item目录
npm install //安装依赖
npm run serve //启动

二、常用Composition API

2.1、setup

特点：

1）setup是vue3中的一个新配置项，值为一个函数

2）setup是所有Composition API‘’表演的舞台‘’

3）组件中所有用到的：数据、方法等等，均要配置在setup中

4）返回值有两种：

1.返回一个对象：在对象中的属性、方法，在模板中可以直接使用

return {
  name,
  age,
};

2.返回一个渲染函数：用于自定义渲染内容

import { h } from "vue";

return () => {
  return h("h1", "sgg");
};

5）注意点：

尽量不要与Vue2.0配置混合使用
在setup中不能访问到Vue2.0的配置
如果有重名setup优先
setup不能是一个async函数，因为返回值不再是一个return的对象，而是promise，模板看不到return对象中的属性
setup的执行的时机，在beforecreate之前，执行一次，this是undefind
setup参数：
- props：值为对象，包含组件外部传递，且组件内部声明接收的属性
- context：上下文对象
  - attrs：值为对象，包含组件外部传递，但没有在porps配置中声明的属性，相当于this.$attrs
  - slot：收到插槽内容，相当于this.$slot，在Vue3中尽量使用v-slot ApI
  - emit：分发自定义事件的函数，相当于this.$emit

2.2、ref

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

语法：const xxx = ref(initValue)

创建一个包含响应式数据的引用对象（reference）

JS中操作数据：xxx.value

模板中读取数据：不需要.value，直接xxx即可

备注：

接受的数据可以是：基本类型、也可以是对象类型
基本类型的数据：响应式依然object.defineProperty()的get和set完成的
对象数据类型：内部求助了Vue3.0中的一个新函数——reactive函数

import {ref} from 'vue'

export default {
  setup() {
    let name = ref("zhangsan");
    let age = ref(18);
    function changedata() {
      name.value = "lisi";
      age.value = 19;
    }
  },
};

2.3、reactive

作用：定义一个对象式响应数据类型

语法：const 代理对象 = reactive（原对象）接受一个对象（或数组），返回一个代理对象（proxy对象）

reactive定义的响应式数据是深层次的

内部基于ES6的Proxy实现，通过代理对象操作源对象内部数据进行操作

import { reactive } from "vue";

export default {
  setup() {
    let person = reactive({
      name: "lisi",
      age: 18,
      hobby: ["抽烟", "喝酒"],
    });
    function changedata() {
      (person.name = "zhangsan"), (person.age = 19);
      person.hobby[0] = "学习";
    }
  },
};

2.4、Vue3.0的数据响应原理

2.4.1、Vue2.0的响应式

实现原理：

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

存在的问题：

新增属性、删除属性，界面不会发生刷新
直接通过下标修改数组，界面不会自动更新

2.4.2、Vue3.0的响应式

实现原理：

通过Proxy（代理）：拦截对象中任意属性的变化
通过Reflect（反射）：对被代理对象的属性进行操作

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

2.5、reactive与ref对比

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

2.6、计算属性与监视

2.6.1、computed函数

2.6.2、watch函数

与vue2.x中watch配置功能一样

两个坑：

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

import { ref, watch } from "vue";
export default {
  //情况一：监视ref所定义的一个响应式数据
  setup() {
    let age = ref(5);
    function changesum() {
      age.value++;
    }
    watch(age, (newValue, oldValue) => {
      console.log(newValue, oldValue);
    });
    return {
      age,
      changesum,
    };
  },
  //情况二：监视ref所定义的多个响应式数据
   setup() {
    let age = ref(5);
    let sum = ref(5);
    function changesum() {
      age.value++;
      sum.value++;
    }
    watch([age, sum], (newValue, oldValue) => {
      console.log(newValue, oldValue);
    });
    return {
      age,
      changesum,
      sum,
    };
  },
  //情况三：监视reactive所定义的一个响应式数据,此处无法获取正确oldvalue，并且强制开启深度监视(deep配置无效)
  setup() {
    let person = reactive({
      name: "zhangsan",
      age: 19,
    });
    function changesum() {
      person.name += "!";
      person.age++;
    }
    watch(person, (newValue, oldValue) => {
      console.log(newValue, oldValue);
    },{deep:true});//此处配置无效
    return {
      person,
      changesum,
    };
  },
  //情况四：监视reactive所定义的一个响应式数据中的某个属性
  setup() {
    let person = reactive({
      name: "zhangsan",
      age: 19,
    });
    function changesum() {
      person.name += "!";
      person.age++;
    }
    watch(
      () => person.name,
      (newValue, oldValue) => {
        console.log(newValue, oldValue);
      }
    );
    return {
      person,
      changesum,
    };
  },
  //情况五：监视reactive所定义的一个响应式数据中的某些属性
  setup() {
    let person = reactive({
      name: "zhangsan",
      age: 19,
    });
    function changesum() {
      person.name += "!";
      person.age++;
    }
    watch([() => person.name, () => person.age], (newValue, oldValue) => {
      console.log(newValue, oldValue);
    });
    return {
      person,
      changesum,
    };
  },
  //特殊情况：
    setup() {
    let person = reactive({
      name: "zhangsan",
      age: 19,
      job: {
        a: {
          b: {
            ssss: 20,
          },
        },
      },
    });
    function changesum() {
      person.name += "!";
      person.age++;
    }
    watch(
      () => person.job,
      (newValue, oldValue) => {
        console.log(newValue, oldValue);
      },
      { deep: true }
    );
    return {
      person,
      changesum,
    };
  },
}

2.6.3、watchEffect函数

watch的套路是：既要指明监视的属性，也要指明监视的回调
watchEffect的套路是：不用指明监视那个属性，监视的回调中用到那个属性，那就监视哪个属性
watchEffect有点像computed：
- 但computed注重的计算出来的值（回调函数返回值），必须写返回值
- watchEffect更注重的是过程（回调函数的函数体），不用写返回值

import { reactive, watch, watchEffect } from "vue";
export default {
  setup() {
    let person = reactive({
      per1: {
        name: "zhangsan",
      },
    });
    function changesum() {
      person.per1.name += "!";
    }
    watchEffect(() => {
      console.log(person.per1.name);
    });
    return {
      person,
      changesum,
    };
  },
};

2.7、Vue3生命周期

vue3.0可以继续使用vue2.0的生命周期，但有两个被改名：

beforeDestory改为beforeUnmount
destroyed改为unmounted

Vue3.0也提供composition API形式的生命周期钩子，与Vue2.0对比如下：

beforeCreate===》setup
created========》setup
beforeMount===》onBeforeMount
mount========》onMounted
beforeUpdate==》onBeforeUpdate
updated=======》onUpdated
beforeUnmount=》onBeforeUnmount
unmounted====》onUnmounted

2.8、自定义hook函数

hook本质是一个函数，把setup函数中使用的Composition API进行封装
类似vue2中的mixin
自定义hook的优势：代码复用，让setup中的逻辑更加清晰

import {} from 'vue'
export default function (){
  ruturn ()
}

2.9、toRef

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

语法：const name = toref（test,'name'）

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

扩展：toRefs与toRef功能一致，但可以批量创建多个ref对象，语法：toRefs（test）

const test = toRef(test,'name')
const test = toRefs(test)

三、其他Composition API

3.1、shallowReactive与shallowRef

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

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

什么时候使用：

如果有一个对象数据，结构较深，但变化时只是外层结构变化===》shallowReactive

如果有一个对象数据，后续功能不会修改该对象中的属性，而是生新的对象来替换===》shallowRef

3.2、readonly与shallowReadonly

readonly：让一个响应式数据变为只读的（深只读）：括号里的数据都不允许改

let test =reactive({
  test1:'kkk',
  test2:'lll'
  test3:{
    height:'111'
  }
})
test = readonly(test)

shallowReadonly：让一个响应式数据变为只读的（浅只读）：只保护第一层数据不能修改，其他可以修改

let test =reactive({
  test1:'kkk',
  test2:'lll'
  test3:{
    height:'111'
  }
})
test = shallowReadonly(test)

3.3、toRaw与markRaw

toRaw：

作用：将一个由reactive生成的响应式对象转为普通对象

使用场景：用于读取响应式对象对应的普通对象，对这个普通对象的所有操作，不会引起页面刷新

let test =reactive({
  test1:'kkk',
  test2:'lll'
  test3:{
    height:'111'
  }
})
const te = toRaw(test)

markRaw：

作用：标记一个对象，使其永远不会在成为响应式对象

注：值改变了

应用场景：

1.有些值不应被设置成响应式的，

2.当渲染具有不可变数据源的大列表时，跳过响应式转换可以提高性能

let test = reactive({
      test1: "kkk",
      test2: "lll",
      test3: {
        height: "111",
      },
    });
const test = markRaw(test);

3.4、customRef

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

案例：

<template>
  <div>
    <input type="text" placeholder="请输入内容" v-model="keyword" />
    <h2>{{ keyword }}</h2>
  </div>
</template>
<script>
import { customRef } from "vue";
export default {
  setup() {
    function MyRef(value) {
      let jsq;
      return customRef((track, tigger) => {
        return {
          get() {
            track();//追踪以来的数据
            return value;
          },
          set(newValue) {
            clearInterval(jsq);
            jsq = setInterval(() => {
              value = newValue;
              tigger();//通知Vue重新解析模板
            }, 1000);
          },
        };
      });
    }
    let keyword = MyRef("hollow");
    return {
      keyword,
    };
  },
};
</script>

3.5、provide与inject

作用：实现祖组件与后代组件的数据传递

代码：

祖组件：

import { provide } from "vue";
setup(){
    let car = reactive({
      name: "奔驰",
      pirce: "30",
    });
    provide("car", car);
}

后代组件：

import { inject } from "vue";
setup(){
  let car = inject("car");
  console.log(car);
}

3.6、响应式数据判断

isRef：检查一个值是否为一个对象

isReactive：检查一个对象是否由reactive创建的响应式代理

isReadonly：检查一个对象是否由readonly创建只读代理

isProxy：检查一个对象是否由reactive或者readonly方法创建的代理

四、Composition API 优势

4.1、OptionAPI存在的问题

在传统的OptionAPI中存在，新增或修改一个需求，就需要在data，methods，computed里修改

4.2、Composition API 优势

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

五、新的组件

5.1、Fragment

在Vue2中，组件必须有根标签

在Vue3中，组件可以没有跟标签，内部会将多个元素包含在一个Fragment虚拟元素中

好处：减少层级，减少内存占用

5.2、Teleport

什么是Teleport？

Teleport是一种能够将我们的组件html结构，移动到指定位置的技术

<template>
  <div>
    <input type="text" placeholder="请输入内容" v-model="keyword" />
    <h2>{{ keyword }}</h2>
    <teleport to="移动的位置">
      <div>内容</div>
    </teleport>
  </div>
</template>

5.3、Suspense

等待一部组件渲染一些额外的内容，让用户有更好的体验

使用步骤：

异步组件引入：

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

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

<template>
  <div>
    <Suspense>
      <template v-slot:default>
        <Child />
      </template>
      <template v-slot:fallback>
        <Child />
      </template>
    </Suspense>
  </div>
</template>

六、其他

6.1、全局API的转移

将全局的API，即Vue调整到应用实例app上面

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

6.2、其他改变

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

过度类名：

Vue2.0写法

.v-enter,
.v-leave-to{}
.v-leave,
.v-enter-to{}

Vue3.0写法

.v-enter-from,
.v-leave-to{}
.v-leave-from,
.v-enter-to{}

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

移除v-on.native修饰符

父组件绑定事件
```
<Child @click='test' @close='text' />
```

子组件中声明自定义事件

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

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

………其他请自行去官方文档查看

zyl83721

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
1
评论
Vue3学习笔记

Vue3.x学习笔记
复制链接

扫一扫