文章15
标签3
分类5

2022复习vue2学习vue3

vue 是一款友好的,多用途且高性能的 JavaScript 框架,它可以帮你创建 可维护性和可测试性更强的代码库。

vue 是渐进式的 JavaScript 框架。本文档只记录 一些概念或者做法,从 vue 文档记录。

交互

我们写的方法中,更新了应用的状态,但没有触碰 DOM 所有的 DOM 操作都由 Vue 来处理,你编写的代码只需要关注逻辑层面即可。

组件

组件系统是 vue 的另一个重要概念,因为它是一种抽象,允许我们使用小型,独立和通常可复用的组件构建大型应用。仔细想想,几乎任意类型的应用界面都可以抽象为一个组件树;

MVVM

MVVMModel–view–viewmodel)是一种软件架构模式

MVVM有助于将图形用户界面的开发与业务逻辑后端逻辑(数据模型)的开发分离开来。是一种设计模式的变体。

当一个 vue 实例被创建时,它将 data 对象中的所有的 property 加入到 Vue 的响应式系统中,当这些 property 的值发生改变时,视图将会产生“响应”,即匹配更新为新的值。

生命周期

每个 vue 实例在被创建时都要经过一系列的初始化过程--。数据监听 编译模板,将实例挂载到 DOM 并在数据变化时更新 DOM 等。同时在这些过程运行一些叫做 生命周期的函数,这给了用户在不同阶段添加到自己的代码的机会。

本质上:每个主要 vue 生命周期事件被分成两个钩子,分别在事件之前和之后调用。 vue 应用程序中有 4 个主要事件(8个主要钩子)

  • 创建 - 在组件创建时执行
  • 挂载 - DOM 被挂载时执行
  • 更新 - 当响应数据被修改时执行
  • 销毁 - 在元素被销毁之前立即执行

beforeCreate 创建之前,访问不到data中的变量的。

create Dom 还没有编译,但是 vue 实例数据和方法可以访问了。

beforeMount 触发在编译 Dom 阶段的,编译模板阶段。我们在这个钩子对页面元素内容是不能修改的。

Mounted 页面挂载完毕之后,这时候我们就可以修改 DOM,已经可以看到页面了。在 mounted 构造函数之后,vue 实例已经创建完毕了,就进行运行阶段了。

这里我要说一下,对Vue的数据更新页面改变的理解,Vue的实例中比如data里面的数据的话,我们假如插值在页面上的话,我们修改这个数据,它不是及时渲染到页面上面的,它是在内存中对之前的虚拟DOM中的data数据进行更改,生成新的虚拟DOM之后才会渲染到页面上。

beforeUpdate 更改data数据后,当虚拟DOM中的data发生改变时触发,此时虚拟DOM没有加载到页面上。页面上的数据不变,虚拟DOM中的数据改变。

Updated 更改data数据之后,虚拟DOM中的data发生改变页面上的data也发生改变(即新生成的虚拟DOM挂载上页面了)

销毁阶段

beforeDestroy------------销毁前执行的钩子函数,可以继续使用vue实例中的数据。
destroyed------------------已经销毁了,vue实例中的数据不可用了。

还有一个没用过的记录一下

actived

deactivated

errirCaptured

vue3生命周期

beforeCreate 跟 created ---> setup

setup()this是不指向当前实例的(this 为 undefined)如果想使用 $emit 的功能,需要借助 setup(props,context)中的 context;

mounted ---> onMounted

beforeUpdate ---> onBeforeUpdate

updated ---> onUpdated

beforeDestroy ---> onBeforeUnmount

destroyed ---> onUnmounted

actived ---> onActivated

deactivated ---> onDeactivated

errorCaptured ---> onErrorCaptured ,onRenderTracked,onRender,Triggered

v-if v-for

vue 在 2.x 版本中的一个元素同时使用 v-fi 和 v-for 时,v-for 会优先使用。

v-if v-for

vue 在 3.x 版本中 v-if 总是优先与 v-for 生效。避免在同一元素上同时使用两者。

v-bind

vue 在2.x 版本中如果 dom 属性 跟 bind绑定属性一样 ,dom 属性总是会覆盖 bing 绑定的属性;

vue 在3.x 绑定的声明顺序决定 dom 属性绑定的值。

ref

我们知道在 dom 上添加 ref 属性 可以通过 this.$refs.xxx 获取到 dom 元素。或者在 组件上添加 可以获取到 组件的实例;

inheritAttrs

当我们使用组件时,为其传递的 props 进行定义,才能够使用,如果没有定义,这个属性会作为 dom 的属性被渲染。解决是 在组件内 inheritAttrs: false

$attrs

项目中有多层组件传参可以使用 $attrs 配合 inheritAttrs 控制这些特性是否显示在 dom 元素上。

$listeners

vue3 已经不支持 $listeners 在 vue3 合并到了 $attrs

计算属性

vue 用声明的方式创建这种依赖关系,计算属性的 getter 函数是没有副作用的,就是只有依赖的状态发生改变依赖的方法绑定也会更新。计算属性是基于响应式依赖进行缓存的,只会在相关响应式依赖发生改变时它们才会重新求值。依赖没有发生改变计算属性会返回之前的结果。

计算属性默认只有 getter,不过在需要时你也可以提供一个 setter

监听属性

watch 响应数据的变化,当需要在数据变化时执行异步或开销较大的操作时,这个方式是最有用的。

单向数据流

所有的 prop 都使得其父子 prop 之间形成了一个单向下行绑定;父级 prop 的更新会向下流动到子组件中,但是反过来则不行。这样会防止从子组件意外变更父级组件的状态,从而导致你的应用的数据流向难以理解。

prop 规范 prop用来传递一个初始值的话,最好本地 data 定义一个数据用这个 prop 作为其初始值2

prop 规范 prop 值需要转换。 最好使用 计算属性处理这个prop

prop验证

app.component('my-component', {
  props: {
    // 基础的类型检查 (`null` 和 `undefined` 值会通过任何类型验证)
    propA: Number,
    // 多个可能的类型
    propB: [String, Number],
    // 必填的字符串
    propC: {
      type: String,
      required: true
    },
    // 带有默认值的数字
    propD: {
      type: Number,
      default: 100
    },
    // 带有默认值的对象
    propE: {
      type: Object,
      // 对象或数组的默认值必须从一个工厂函数返回
      default() {
        return { message: 'hello' }
      }
    },
    // 自定义验证函数
    propF: {
      validator(value) {
        // 这个值必须与下列字符串中的其中一个相匹配
        return ['success', 'warning', 'danger'].includes(value)
      }
    },
    // 具有默认值的函数
    propG: {
      type: Function,
      // 与对象或数组的默认值不同,这不是一个工厂函数——这是一个用作默认值的函数
      default() {
        return 'Default function'
      }
    }
  }
})

:eagle: 提示

注意 prop 会在一个组件实例创建之前进行验证,所以实例的 property (如 data、computed 等) 在 default 或 validator 函数中是不可用的。

emits

emits:列表声明从父组件继承来的事件

$emit:抛出事件,通过父组件处理

在子组件中,通过 $emit() 来触发事件

在父组件中,通过 v-on 来监听子组件事件

Provide / Inject (的绑定不是响应式)

深度嵌套的组件,而深层的子组件只需要父组件的部分内容。这种情况下,我们可以使用 Provide Inject:父组件使用 provide 提供数据 ,子组件 inject 使用这些数据。

值得注意的 provide 要提供组件实例属性的话,我们需要将 provide转换为返回对象的函数;

异步组件

defineAsyncComponent

组合式 API

新的 setup 选项在组件被创建之前执行,一旦 props 被解析完成,它就将被作为组合式 API 的入口。

在 setup 中你应该避免使用 this,因为它不会找到组件实例。setup 的调用发生在 data property、computed property 或 methods 被解析之前,所以它们无法在 setup 中被获取。

总结

组合式 API光看文档是不行的,还得练,vue 3更新了很多特性,感觉有点像 react ref什么的。

0 评论

">