重读Vue.js文档

2019-09-09 admin

这是学习笔记,仅供自己学习使用。

重读之后,一些细小的点(只是补缺自己所缺的点)。

生命周期

  • 所有的声明周期钩子自动绑定this上下文到实例中,因此你可以访问数据,对属性和方法进行运算。这意味着*你不能使用箭头函数来定义一个声明周期方法#。这是因为箭头函数绑定了父上下文。因此this与你期待的Vue实例不同。

(注:箭头函数的this根据所在环境,换句话说,就是上下文;普通函数的this指向声明时的对象,就是调用函数的对象。)

  • mounted不会承诺所有的子组件也都一起被挂载。如果你希望等到整个试图都渲染完毕,可以用vm.$nextTick替换掉mounted:
mounted: function () {
    this.$nextTick(function () {
        // Code that will run only after the entire view has been rendered
    })
}

细小的点

  • v-model.trim 绑定属性,将不能输入空格。(可用于表单验证)
  • 只有当实例被创建时就已经存在于data中的属性才是响应式的。(如果你知道你会在晚些时候需要一个属性,但是一开始它为空或不存在,那么你仅需要设置一些初始值。)
  • 计算属性、侦听器、方法: 1)计算属性是基于响应式依赖进行缓存的,也就是说,只有在相关响应式依赖发生改变时才会重新求值; 2)侦听器用在数据变化时执行异步或开销较大的操作时; 3)能用计算属性就用计算属性。
  • 动态class:
  • 绑定内联样式:
    (emmm这个一般会用,写了内敛样式是要被人揍得!)
  • Vue会尽可能高效地渲染元素,通常会复用已有元素而不是从头开始渲染。若是想要改变如此状况,可以使用key管理可复用的元素。
  • v-if和v-show: 1)v-if是“真正”的条件渲染,因为它会确保在切换过程中条件块内的事件监听器和子组件适当地被销毁和重建; 2)v-show不管初始条件是什么,元素总是会被渲染,并且只是简单地基于CSS进行切换。 3)v-if有更高的切换开销,而v-show有更高的初始渲染开销。因此,需要非常频繁地切换,则使用v-show较好;如果在运行时条件很少改变,则使用v-if较好。

没怎么用过的点

1、动态参数

重点

1、由于JavaScript的限制,Vue不能检测以下数组的变动:

1)当你利用索引直接设置一个数组项时,例如:vm.items[indexOfItem] = newValue;
2)当你修改数组的长度时,例如:vm.items.length = newLength

举个例子:

var vm = new Vue({
    data: {
        items: ['a', 'b', 'c']
    }
})
vm.items[1] = 'x' // 不是响应性的
vm.items.length = 2 // 不是响应性的

为了解决第一类问题,以下两种方式都可以事项和vm.items[indexOfItem] = newValue相同的效果,同时也将在响应式系统内触发状态更新:

// Vue set
Vue.set(vm.items, indexOfItem, newValue)

// Array.prototype.splice
vm.items.splice(indexOfItem, 1, newValue)

为了解决第二类问题,可以使用splice。

vm.items.splice(newLength)

平时中用过索引直接设置一个数组时无效的,一路set到底才有效,现在才知道是怎么回事了!!!!

2、还是由于JavaScript的限制,Vue不能检测对象属性的添加或删除:

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

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

对于已经创建的实例,Vue不允许动态添加根级别的响应式属性。但是,可是使用Vue.set(object, propertyName, value)方法向嵌套对象添加响应式属性。 若需要为已有对象赋值多个新属性,比如使用Object.assign()或_.extend()。

Object.assign(vm.obj, {
    xxx: 'xxx',
    yyy: 'yyy',
})

[转载]原文链接:https://segmentfault.com/a/1190000020337209

本站文章除注明转载外,均为本站原创或编译。欢迎任何形式的转载,但请务必注明出处。

转载请注明:文章转载自 JavaScript中文网 [https://www.javascriptcn.com]

本文地址:https://www.javascriptcn.com/read-74721.html

文章标题:重读Vue.js文档

相关文章
v-charts | 饿了么团队开源的基于 Vue 和 ECharts 的图表工具
在使用echarts生成图表时,经常需要做繁琐的数据类型转化、修改复杂的配置项,v-charts的出现正是为了解决这个 痛点。基于Vue2.0和echarts封装的v-charts图表组件,只需要统一提供一种对前后端都友好的数据格式 设置简...
2018-05-24
Vue获取DOM元素样式和样式更改示例
在 vue 中用 document 获取 dom 节点进行节点样式更改的时候有可能会出现 ‘style’ is not definde的错误,这时候可以在 mounted 里用 $refs 来获取样式,并进行更改: <template...
2017-03-13
Vue.js组件tab实现选项卡切换
本文实例为大家分享了vue插件tab选项卡的具体代码,供大家参考,具体内容如下 效果图: 代码如下: <!DOCTYPE html> <html lang="en"> <head> ...
2017-03-13
React.js编程思想
JavaScript框架层出不穷,在很多程序员看来,React.js是创建大型、快速的Web应用的最好方式。这一款由Facebook出品的JS框架,无论是在Facebook还是在Instagram中,它的表现都非常出色。 使用React.j...
2015-11-12
从2014年的发展来展望JS的未来将会如何
<font face="寰?杞?板呴粦, Arial, sans-serif ">2014骞达紝杞?浠惰?屼笟鍙戝睍杩呴€燂紝鍚勭?嶈??瑷€灞傚嚭涓岖┓锛屼互婊¤冻鐢ㄦ埛涓嶆柇鍙桦寲镄勯渶姹伞€傝繖浜涜??...
2015-11-12
jsdom 中文文档(纯翻译)
jsdom是一个纯粹由 javascript 实现的一系列 web标准,特别是 WHATWG 组织制定的DOM和 HTML 标准,用于在 nodejs 中使用。大体上来说,该项目的目标是模拟足够的Web浏览器子集,以便用于测试和挖掘真实世界...
2018-05-14
three.js实现围绕某物体旋转
话不多说,请看代码: 可以拖动右上角观察变化 <!DOCTYPE html> <html lang="en" style="width: 100%; height:100%;">...
2017-02-17
JavaScript教程:JS中的原型
Keith Peters 几年前发表的一篇博文,关于学习没有“new”的世界,其中解释了使用原型继承代替构造函数。两者都是纯粹的原型编码。 标准方法(The Standard Way) 一直以来,我们学习的在 JavaScript 里创建对...
2015-11-12
NodeJS参考手册pdf版
下载地址:Nodejs参考手册PDF版下载 ...
2015-11-12
JS中的语音合成——Speech Synthesis API
JS中的语音合成——Speech Synthesis API 简介 HTML5中和Web Speech相关的API实际上有两类,一类是“语音识别(Speech Recognition)”,另外一个就是“语音合成(Speech Synthes...
2018-05-17
回到顶部