关闭

Vue.js(version 2)的时代已到来,前端攻城狮你准备好了吗?-------- 一、

标签: 前端vue-js
174人阅读 评论(0) 收藏 举报
分类:

轻量化的前端UI框架—–Vue.js

本文拿vue对比其他前端框架,介绍它的强大之处,我会列出相应的实例供大家参考,具体功能可以参考官方API

  • Virtual DOM(虚拟DOM)
  • 组件化应用

Vue 专注于创造前端的富应用。不同于早期的JavaScript框架“功能齐全”,Vue只有框架的骨架,其他的功能如路由、状态管理等是框架分离的组件。

虚拟DOM

所谓的Virtual DOM基本上说就是它名字的意思:虚拟DOM,DOM树的虚拟表现。它的诞生是基于这么一个概念:改变真实的DOM状态远比改变一个JavaScript对象的花销要大得多。

Virtual DOM是一个映射真实DOM的JavaScript对象,如果需要改变任何元素的状态,那么是先在Virtual DOM上进行改变,而不是直接改变真实的DOM。当有变化产生时,一个新的Virtual DOM对象会被创建并计算新旧Virtual DOM之间的差别。之后这些差别会应用在真实的DOM上。
那么vue是怎么操作虚拟DOM的呢?是的,他是通过Vue实例;

Vue实例

每个 Vue.js 应用都是通过构造函数 Vue 创建一个 Vue 的根实例 启动的:

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

在实例化 Vue 时,需要传入一个选项对象,它可以包含数据、模板、挂载元素、方法、生命周期钩子等选项。

一、选项——数据

1. data

 类型: object | Function
 限制:组件的定义只接受 function。

举个栗子:

<script>
    var data = { a: 1 }
    // 直接创建一个实例
    var vm = new Vue({
      data: data
    })
    vm.a // -> 1
    vm.$data === data // -> true
    // Vue.extend() 中 data 必须是函数
    var Component = Vue.extend({
      data: function () {//限制(组件的定义只接受 function)
        return { a: 1 }
      }
    })
</script>

2. props

 类型: Array<string> | Object

props 可以是数组或对象,用于接收来自父组件的数据。props 可以是简单的数组,或者使用对象作为替代,对象允许配置高级选项,如类型检测、自定义校验和设置默认值。

举个栗子:

<script>
    // 简单语法
    Vue.component('props-demo-simple', {
      props: ['size', 'myMessage']
    })
    // 对象语法,提供校验
    Vue.component('props-demo-advanced', {
      props: {
        // 只检测类型
        height: Number,
        // 检测类型 + 其他验证
        age: {
          type: Number,
          default: 0,
          required: true,
          validator: function (value) {
            return value >= 0
          }
        }
      }
    })
</script>

3. computed

 类型: { [key: string]: Function | { get: Function, set: Function } }

计算属性将被混入到 Vue 实例中。所有 getter 和 setter 的 this 上下文自动地绑定为 Vue 实例。
举个栗子:

<script>
    var vm = new Vue({
      data: { a: 1 },
      computed: {
        // 仅读取,值只须为函数
        aDouble: function () {
          return this.a * 2
        },
        // 读取和设置
        aPlus: {
          get: function () {
            return this.a + 1
          },
          set: function (v) {
            this.a = v - 1
          }
        }
      }
    })
        vm.aPlus   // -> 2 未传参数,所以进入aPlus的get方法
        console.log(vm.aPlus); // -> 2
        vm.aPlus = 3  //传参数 v=3,所以进入aPlus的set方法
        console.log(vm.a); // -> 2
        vm.a       // -> 2
        console.log(vm.a); // -> 2
        vm.aDouble // -> 4
        console.log(vm.aDouble); // -> 4
</script>

计算属性的结果会被缓存,除非依赖的响应式属性变化才会重新计算。注意,如果实例范畴之外的依赖 (比如非响应式的 not reactive) 是不会触发计算属性更新的。

4. methods

    类型: { [key: string]: Function }

methods 将被混入到 Vue 实例中。可以直接通过 VM 实例访问这些方法,或者在指令表达式中使用。方法中的 this 自动绑定为 Vue 实例。
举个栗子:

<script>
    var vm = new Vue({
      data: { a: 1 },
      methods: {
        plus: function () {
          this.a++
        }
      }
    })
    vm.plus()
    vm.a // 2
</script>

5. watch

    类型:{ [key: string]: string | Function | Object }

一个对象,键是需要观察的表达式,值是对应回调函数。值也可以是方法名,或者包含选项的对象。Vue 实例将会在实例化时调用 $watch(),遍历 watch 对象的每一个属性。

<script>
        var vm = new Vue({
      data: {
        a: 1,
        b: 2,
        c: 3
      },
      watch: {
        a: function (val, oldVal) {
          console.log('new: %s, old: %s', val, oldVal)
        },
        // 方法名
        b: 'someMethod',
        // 深度 watcher
        c: {
          handler: function (val, oldVal) { /* ... */ },
          deep: true
        }
      }
    })
    vm.a = 2 // -> new: 2, old: 1
</script>

二、选项——DOM

1. el

  类型:string | HTMLElement
  限制: 只在由 new 创建的实例中遵守。

提供一个在页面上已存在的 DOM 元素作为 Vue 实例的挂载目标。可以是 CSS 选择器,也可以是一个 HTMLElement 实例。

在实例挂载之后, 元素可以用 vm.$el 访问。

如果这个选项在实例化时有作用,实例将立即进入编译过程,否则,需要显式调用 vm.$mount() 手动开启编译。

2. template

  类型:string

一个字符串模板作为 Vue 实例的标识使用。模板将会 替换 挂载的元素。挂载元素的内容都将被忽略,除非模板的内容有分发 slot。

如果值以 # 开始,则它用作选项符,将使用匹配元素的 innerHTML 作为模板。常用的技巧是用

3. render

  类型:(createElement: () => VNode) => VNode

字符串模板的代替方案,允许你发挥 JavaScript 最大的编程能力。render 函数接收一个 createElement 方法作为第一个参数用来创建 VNode。

如果组件是一个函数组件,Render 函数还会接收一个额外的 context 参数,为没有实例的函数组件提供上下文信息。

三、选项——生命周期钩子

每个 Vue 实例在被创建之前都要经过一系列的初始化过程。例如,实例需要配置数据观测(data observer)、编译模版、挂载实例到 DOM ,然后在数据变化时更新 DOM 。在这个过程中,实例也会调用一些 生命周期钩子
,这就给我们提供了执行自定义逻辑的机会。例如,created 这个钩子在实例被创建之后被调用:

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

也有一些其它的钩子,在实例生命周期的不同阶段调用,如 mounted、updated、destroyed。钩子的 this 指向调用它的 Vue 实例

下面展示的是实例的生命周期图

这里写图片描述

1. beforeCreate

  类型:Function

在实例初始化之后,数据观测(data observer) 和 event/watcher 事件配置之前被调用。

2. created

类型:Function

实例已经创建完成之后被调用。在这一步,实例已完成以下的配置:数据观测(data observer),属性和方法的运算, watch/event 事件回调。然而,挂载阶段还没开始,$el 属性目前不可见。

3. beforeMount

  类型:Function

在挂载开始之前被调用:相关的 render 函数首次被调用。
该钩子在服务器端渲染期间不被调用。

4. mounted

类型:Function

el 被新创建的 vm.elrootmountedvm.el 也在文档内。
该钩子在服务器端渲染期间不被调用。

5. beforeUpdate

  类型:Function

数据更新时调用,发生在虚拟 DOM 重新渲染和打补丁之前。

你可以在这个钩子中进一步地更改状态,这不会触发附加的重渲染过程。
该钩子在服务器端渲染期间不被调用。

6. update

类型:Function

由于数据更改导致的虚拟 DOM 重新渲染和打补丁,在这之后会调用该钩子。

当这个钩子被调用时,组件 DOM 已经更新,所以你现在可以执行依赖于 DOM 的操作。然而在大多数情况下,你应该避免在此期间更改状态。如果要相应状态改变,通常最好使用计算属性或 watcher 取而代之。
该钩子在服务器端渲染期间不被调用。

7. activated

  类型:Function

keep-alive 组件激活时调用。
该钩子在服务器端渲染期间不被调用。

8. deactivated

类型:Function

keep-alive 组件停用时调用。
该钩子在服务器端渲染期间不被调用。

9. beforeDestory

  类型:Function

实例销毁之前调用。在这一步,实例仍然完全可用。
该钩子在服务器端渲染期间不被调用。

10. destoryed

类型:Function

Vue 实例销毁后调用。调用后,Vue 实例指示的所有东西都会解绑定,所有的事件监听器会被移除,所有的子实例也会被销毁。
该钩子在服务器端渲染期间不被调用。

0
0

查看评论
* 以上用户言论只代表其个人观点,不代表CSDN网站的观点或立场
    个人资料
    • 访问:6990次
    • 积分:188
    • 等级:
    • 排名:千里之外
    • 原创:10篇
    • 转载:7篇
    • 译文:0篇
    • 评论:0条
    文章分类