vue

Vue.js中文API阅读笔记及自己踩过的坑

2018-03-02  本文已影响0人  一只神奇的小绵羊

       emmmmm，，之前因为开项目来不及仔细读一遍，只能是用到什么找什么，然而深感对vue了解的无力(ŎдŎ；)。。还有一个周开新项目，恩，认真看一哈！(￣▽￣)
【本文并没有讲解全部API，因为太多了。。总结了部分我觉得重要的点加以分析】
传送门：Vue.js中文API

  1. Vue参考MVVM模式，使用vm (ViewModel 的简称)来表示Vue实例

       vue是一个虚拟DOM的，以数据驱动为核心的前端框架。数据驱动也可以称为响应式系统，当属性的值发生变化时，视图都会“及时响应”，并更新相应的新值。

  1. 实例生命周期钩子函数

       每个 Vue 实例在被创建之前，都要经过一系列的初始化过程，例如，Vue 实例需要设置数据观察(set up data observation)、编译模板(compile the template)、在 DOM 挂载实例(mount the instance to the DOM)，以及在数据变化时更新 DOM(update the DOM when data change)。在这个过程中，Vue 实例还会调用执行一些生命周期钩子函数，这样用户能够在特定阶段添加自己的代码。

Vue生命周期
       （图可能不是很清晰，小伙伴们可以参考原图）

关于生命周期具体理解推荐一篇文章来自segmentfault

3. 关于computed和watcher，留个flag，汇总一下再写

4. 修饰符(modifier)是以 . 表示的特殊后缀，表明应当以某种特殊方式绑定指令。

       关于修饰符，请移步我的一篇搬运文章☞ Vue修饰符详解

5. 渲染

       1. 根据条件进行渲染：v-if与v-show
       2. 列表渲染：v-for
<ul id="example-2">
  <li v-for="(item, index) in items">
    {{ parentMessage }} - {{ index }} - {{ item.message }}
  </li>
</ul>

var example2 = new Vue({
  el: '#example-2',
  data: {
    parentMessage: 'Parent',
    items: [
      { message: 'Foo' },
      { message: 'Bar' }
    ]
  }
})
结果： 
<div v-for="(value, key, index) in object">
  {{ index }}. {{ key }}: {{ value }}
</div>

new Vue({
  el: '#v-for-object',
  data: {
    object: {
      firstName: 'John',
      lastName: 'Doe',
      age: 30
    }
  }
})
结果：

注意，在遍历一个对象时，是按照 Object.keys() 得出 key 的枚举顺序来遍历，无法保证在所有 JavaScript 引擎实现中完全一致。

<div v-for="item in items" :key="item.id">
  <!-- content -->
</div>
推荐在使用 v-for 时，尽可能提供一个 key，除非迭代的 DOM 内容足够简单，
或者你是故意依赖于默认行为来获得性能提升。
由于这是 Vue 识别节点的通用机制，因此 key 并不是仅限于与 v-for 关联，
我们将在之后的指南中看到，key 还可以其他场景使用。

因为没有用到过所以不是很理解，给个flag后续了解。

<li v-for="todo in todos" v-if="!todo.isComplete">
  {{ todo }}
</li>

       划重点！！！！

       3. 数组变化检测(Array Change Detection)

       Vue 将观察数组(observed array)的变化数组方法(mutation method)包裹起来，以便在调用这些方法时，也能够触发视图更新。这些包裹的方法如下：

push()
pop()
shift()
unshift()
splice()
sort()
reverse()

由于 JavaScript 的限制，Vue 无法检测到以下数组变动：

  1. 当你使用索引直接设置一项时，例如 vm.items[indexOfItem] = newValue
  2. 当你修改数组长度时，例如 vm.items.length = newLength

       所以，使用Vue.set(example1.items, indexOfItem, newValue)来解决第一个问题，
使用example1.items.splice(indexOfItem, 1, newValue)来解决第一和第二个问题。
这两种方法可以通过响应式系统触发状态更新。

       4. 对象变化检测(Array Change Detection)

受现代 Javascript 的限制， Vue 无法检测到对象属性的添加或删除：

var vm = new Vue({
 data: {
  a: 1
 }
})
// `vm.a` 是响应的

vm.b = 2
// `vm.b` 不是响应的

       Vue 不允许在已经创建的实例上，动态地添加新的根级响应式属性(root-level reactive property)。然而，可以使用 Vue.set(object, key, value) 方法，将响应式属性添加到嵌套的对象上。例如：

var vm = new Vue({
 data: {
   userProfile: {
     name: 'Anika'
   }
 }})

       可以向嵌套的 userProfile 对象，添加一个新的 age 属性：
       Vue.set(vm.userProfile, 'age', 27)
       还可以使用 vm.$set 实例方法，这也是全局 Vue.set 方法的别名：
       vm.$set(this.userProfile, 'age', 27)

       这是刚接触Vue的时候踩到过的一个大坑，现在想起来还头皮发麻
∑(ﾟДﾟノ)ノ

6. DOM 模板解析

当时用DOM模板时，会受到一些来源于HTML的限制，比如，这种写法是报错的：

<table>
  <!--my-row是自定义模板-->
  <my-row>...</my-row>
</table>

解决方案：

<table>
  <tr is="my-row"></tr>
</table>

is属性请自行百度。

敲黑板

在使用以下字符串模板之一的场景中，这些限制将不再适用：

所以，用.vue吧，毕竟用的就是vue框架233333_(:з」∠)_

7. 组件复用

组件(component)是 Vue 最强大的功能之一。组件可以帮助你扩展基本的 HTML 元素，以封装可重用代码。

在编写组件时，记住是否要复用组件有好处。一次性组件跟其它组件紧密耦合没关系，但是可复用组件应当定义一个清晰的公开接口。

Vue 组件的 API 来自三部分 - props, events 和 slots ：

8. 组件的组合与通信

组件，意味着组合在一起使用的元件，多数场景是父子关系：组件 A 可以在自己的模板中使用组件 B。这就必然的需要彼此相互通信：父组件可能会向下传递数组给子组件，然后子组件也可能会将自身发生的变化通知到父组件。然而，重要的是，为了尽可能将父子组件解耦，需要有一个定义清晰的接口。定义清晰的通信方式，可以确保组件可以相对隔离地组织代码，以及合乎逻辑易于推断，从而使它们更加易于维护，并且可能更加易于复用。

vue的大方面的功能核心就是组件，正是组件的组合嵌套复用构成了快速且多样的vue项目生态圈，而组件通信又是组件中比较重要的知识点。

  1. 父向子组件：

    • 在子组件中添加props(既可以传递数据也可以传递方法)
      常用形式<child :msg = "parentMsg"/>
      含有路由出口的使用形式<router-view :propsdata="data"/>
    • this.$broadcast 调用子组件方法（子组件在events中写被调用方法）
    • 父组件通过this.$ref获得子组件的引用
      【$refs 只在组件渲染完成后才填充，并且它是非响应式的。它仅仅作为一个直接访问子组件的应急方案 - 应当避免在模板或计算属性中使用 $refs。】
    • 使用this.$children（）获得子组件的Vue实例

  2. 子向父组件：

    • this.$emit (父组件在methods中写被调用方法，并通过@event绑定到子组件) ，子组件中通过这种方法传递数给父组件同时激活父组件的被调用方法。
    • this.$dispath （父组件在events中写被调用方法）
    • 在子组件中添加插槽slot,父组件可以向子组件中插入模板 <template/> ，通过slot-scope获得子组件返回的值
    • 使用this.$parent获得父组件Vue实例 (this.$root获得根组件的Vue实例)

一点补充：在某些场景中，我们可能需要对一个 prop 进行「双向绑定」 - 事实上，这个功能在 Vue 1.x 中已经由 .sync 修饰符实现。但是在2.0中移除，在2.3.0+中以语法糖的形式再次加入。虽然用的不多，如果想了解请移步API。

  1. 通过bus.js或者自身的vue实例来进行不同组件之间的数据传递
    • 通过new一个Vue对象作为通信的桥梁（bus.$emit() => bus.$on()）
    • 自身的vue实例（this.$emit() => this.$on()）
  2. Flux以及Vuex（全局单例模式）同时也可用于解决不同组件之间的通信问题（解决了繁杂事件订阅和广播）
  3. 路由传参
    这里要注意，第一种方式是无法传参的，要传参必须通过第二种方式，即以 name 的形式而不能以路径的形式。所以在路由中的定义如下第三张图。
    不带参 带参 路由表中的定义

关于slot，与props相似，简单来说就是props把数据扔到子组件中，slot把html扔到子组件中。关于slot留个flag后续写个专栏具体补充。。。

请注意，props是单向数据流，按照自上而下单向流动方式构成

9. 动态组件

data(){
    return{
      //...
    }
},
activate (done) { //执行这个参数时，才会切换组件  
    var self = this;  
    // 
    axios.get("/test", function (data) {    
    self.hello = data;  
    done(); //ajax执行成功，切换组件  
    })  
}

注意：
【1】只有在第一次渲染组件时，才会执行activate，且该函数只会执行一次（在第一次组件出现的时候延迟组件出现）

【2】没有keep-alive时，每次切换组件出现都是重新渲染（因为之前隐藏时执行了destroy过程），因此会执行activate方法。

10. 组件杂项

以下全部有待补充，惯例，flaggggggggggggg

11. 过渡&动画

概述

过渡和动画可以对页面内容以及用户体验做一些良好的提升，避免生硬的切换效果带来的挫顿感。个人看法：如果不考虑模块化发布或者工程量不是很大，在系统功能完善之后进行过度动画的添加可以对页面逼格进行大幅提升~

从页面中添加（显示）、移除（隐藏）或者更新一些成员的时候，Vue提供了多种的过渡动画来避免生硬的元素转变。包括以下工具：

单元素/组件的过渡

Vue提供了transition外层包裹容器组件(wrapper component)，可以给下列情形中的任何元素和组件添加进入/离开(enter/leave)过渡：

一个demo：

<template>
<div id="demo">
  <button v-on:click="show = !show">
    Toggle
  </button>
  <transition name="fade">
    <p v-if="show">hello</p>
  </transition>
</div>
</template>

<script>
new Vue({
  el: '#demo',
  data: {
    show: true
  }
})
</script>

<style>
.fade-enter-active, .fade-leave-active {
  transition: opacity .5s;
}

.fade-enter, .fade-leave-to /* .fade-leave-active 在低于版本 2.1.8 中 */ {
  opacity: 0;
}
</style>
其他的予以保留 flaggggg

正在开新项目，闲下来继续更新

上一篇 下一篇

猜你喜欢

热点阅读