关于Vue.js一些问题和思考学习笔记2

前言

本文非vue教程，仅为学习vue过程中的个人理解与笔记，有说的不正确的地方欢迎指正讨论

1、computed计算属性函数中不能使用vm变量

在计算属性的函数中，不能使用Vue构造函数返回的vm变量，因为此时vm还未返回，依然处于Vue内部构造函数过程中，遂只能使用this来代替vm。 若要使用

，可使用以下方法来实现代码智能感知

另：其他不能用vm变量，只能使用this变量的地方，都可以通过此方法来获得Typescript的智能感知和代码语法检查，比如

生命周期系列函数等。 不过模板里的vm引用Typescript无能为力，只能等待ts支持vue的jsx语法了╮(╯_╰)╭

2、计算属性中不能引用其他计算属性？

官方教程中没有找到相关说明(应该是我没找到)，从使用角度而言大致可以总结出以下结论：

• 计算属性必须引用（依赖）非计算属性或固定值。（见demo1）
• 计算属性若引用（依赖）其他计算属性，则被引用的计算属性必须引用非计算属性或固定值（见demo2）
• 计算属性可循环依赖，但最终依赖链上的最上游的计算属性，必须引用非计算属性或固定值。

DEMO1：官方标准用法，计算属性引用非计算属性：

rush:js;"> var vm = new Vue({ el: "#app",data: { dataVal: "xxcanghai" },computed: { computedVal1: function () { //标准用法，计算属性引用非计算属性 return this.dataVal + "_1";//输出 xxcanghai_1 } } });

DEMO2：计算属性链式依赖其他计算属性，则依赖链头必须引用非计算属性或固定值

rush:js;"> var vm = new Vue({ el: "#app",computed: { computedVal1: function () { return this.dataVal + "_1"; },computedVal2: function () { //合法，计算属性computedVal2引用computedVal1，computedVal1再引用dataVal return this.computedVal1 + "_2";//输出 xxcanghai_1_2 } } });

原因很容易理解，如果最终没有引用或依赖任何非计算属性，那么计算属性在计算时会陷入死循环。

3、vue2.0中若使用组件嵌套，则在父组件执行\$forceUpdate()之前模板中\$children为空数组

触发这个问题有以下几个前提：

• vue版本为2.0版本，1.0无此问题。
• 使用组件嵌套，在父组件的模板中访问$children变量
• 在渲染完成后没有再将$children变量写入过父组件的data变量（或其他vm数据）就会触发此问题。

rush:xhtml;">

{{$children.length}}

//子组件代码
Vue.component("child",{
template: "

child

",});

//父组件声明
new Vue({
el: "#app",});