目录

1、Vue.js 是什么

2、Vue 实例

2.1 创建一个 Vue 实例

2.2 数据与方法

⭐2.3 实例的生命周期 钩子

⭐2.4 生命周期图示


1、Vue.js什么

官网简介:Vue (读音 /vjuː/,类似于 view) 是一套用于构建用户界面渐进式框架。与其它大型框架不同的是,Vue设计可以自底向上逐层应用。Vue核心库只关注图层,不仅易于上手,还便于与第三方库或既有项目整合。另一方面,当与现代化的工具链以及各种支持类库结合使用时,Vue 也完全能够为复杂单页应用提供驱动

视频讲解Vue.js 教程

与其他框架对比:对比其他框架 — Vue.js

2、Vue 实例

2.1 创建一个 Vue 实例

每个 Vue 应用都是通过用 Vue 函数创建一个新的 Vue 实例开始的:

var vm = new Vue({
  // 选项
})

一个 Vue 应用由一个通过 new Vue 创建的根 Vue 实例,以及可选的嵌套的、可复用组件树组成。举个例子,一个 todo 应用的组件树可以是这样的:

实例

└─ TodoList

      ├─ TodoItem

       │ ├─ TodoButtonDelete

       │ └─ TodoButtonEdit

       └─ TodoListFooter

             ├─ TodosButtonClear

             └─ TodoListStatistics

需要明白的是,所有的 Vue 组件都是 Vue 实例,并且接受相同选项对象 (一些根实例特有的选项除外)

2.2 数据方法

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

// 我们数据对象
var data = { a: 1 }

// 该对象加入到一个 Vue 实例var vm = new Vue({
  data: data
})

// 获得这个实例上的 property
// 返回数据对应字段
vm.a == data.a // => true

// 设置 property 也会影响到原始数据
vm.a = 2
data.a // => 2

// ……反之亦然
data.a = 3
vm.a // => 3

当这些数据改变时,视图会进行重渲染。值得注意的是只有当实例被创建时就已经存在于 data 中property 才是响应的。也就是说如果你添加一个新的 property比如

如果你知道你会在晚些时候需要一个 property,但是一开始它为空或不存在,那么你仅需要设置一些初始值比如

data: {
  newTodoText: '',
  visitCount: 0,
  hideCompletedTodos: false,
  todos: [],
  error: null
}

除了数据 property,Vue 实例还暴露了一些有用的实例 property方法。它们都有前缀 $以便用户定义property 区分开来。例如

var data = { a: 1 }
var vm = new Vue({
  el: '#example',
  data: data
})

vm.$data === data // => true
vm.$el === document.getElementById('example') // => true

// $watch 是一个实例方法
vm.$watch('a', function (newValue, oldValue) {
  // 这个回调将在 `vm.a` 改变后调用
})

可以在 API 参考中查阅到完整的实例 property方法列表

⭐2.3 实例的生命周期 钩子

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

比如 created 钩子可以用来在一个实例被创建之后执行代码

new Vue({
  data: {
    a: 1
  },
  created: function () {
    // `this` 指向 vm 实例
    console.log('a is: ' + this.a)
  }
})
// => "a is: 1"

也有一些其它的钩子,在实例生命周期不同阶段被调用,如 mountedupdated 和 destroyed生命周期钩子的 this 上下文指向调用它的 Vue 实例。

注意!!!

不要在选项 property 或回调使用箭头函数比如 created: () => console.log(this.a) 或 vm.$watch('a', newValue => this.myMethod())。因为箭头函数没有 thisthis 会作为变量一直向上词法作用域查找,直至找到为止,经常导致 Uncaught TypeError: Cannot read property of undefined 或 Uncaught TypeError: this.myMethod is not a function 之类的错误

⭐2.4 生命周期图示

官网

中文翻译

Vue.js是一种流行的JavaScript框架,它提供了一组生命周期钩子函数用于组件的不同阶段执行特定的代码。以下是Vue.js生命周期钩子函数:

  1. beforeCreate:在实例被创建之前调用,此时数据观测和事件配置尚未开始。vue实例的挂载元素el和数据对象data都为undefined ,还未初始化 ,这个阶段我们还拿不到数据。

  2. created:在实例创建完成后立即调用,此时实例已经完成了数据观测,属性方法运算,但是尚未挂载到DOM中。该阶段已有了vue实例的数据对象data,但是实例对象el没有 ,也就是说可以拿到数据 ,但是无法获取Dom节点 ,此时data 和 methods已经可以使用,但是页面没有渲染完成

因此,一些获取数据data的逻辑可以写在created钩子数中


  1. beforeMount:在实例挂载到DOM之前调用。该阶段的vue实例中的$el和data都初始化,但还是挂载之前的虚拟DOM节点,此时实例尚未挂载完成 ,此时页面上还没有真实数据,只是一个模板页面

  2. mounted:在实例挂载到DOM后调用,此时组件已经在DOM中渲染,并且可以操作DOM了。vue实例挂载完成页面已经成功渲染数据并真实渲染到页面上,在这个钩子函数里面可以使用一些第三方插件

上面的四个钩子函数都是在Vue生命周期过程自动调用。


  1. beforeUpdate:在数据更新之前调用,发生在虚拟DOM重新渲染和打补丁之前。页面上还保留着旧数据。

  2. updated:在数据更新之后调用,发生在虚拟DOM重新渲染和打补丁之后。页面上数据已经被替换最新的。只有在数据改变后才调用。

  3. beforeDestroy:在实例销毁之前调用,这个时候实例仍然完全可用。

  4. destroyed:在实例销毁之后调用,此时所有的事件监听器都被移除,对应的vue实例的指令都被解绑,所有的子实例也会被销毁。


    页面一次加载时候,只会调用触发前四个阶段: beforeCreate,created, beforeMount,mounted 钩子函数。

此外,还有两个较少使用的生命周期钩子函数:

  1. activated:在keep-alive组件激活时调用。

  2. deactivated:在keep-alive组件停用时调用。

以上是Vue.js常用的生命周期钩子函数,开发者可以根据需要在这些钩子函数中编写自己的代码,以实现特定的行为逻辑

参考

Vue 实例 — Vue.js

Vue全家桶之Vue的生命周期


原文地址:https://blog.csdn.net/m0_62006803/article/details/134753036

本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任

如若转载,请注明出处:http://www.7code.cn/show_33102.html

如若内容造成侵权/违法违规/事实不符,请联系代码007邮箱suwngjj01@126.com进行投诉反馈,一经查实,立即删除

发表回复

您的邮箱地址不会被公开。 必填项已用 * 标注