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

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

在计算属性的函数中,不能使用Vue构造函数返回的vm变量,因为此时vm还未返回,依然处于Vue内部构造函数过程中,遂只能使用this来代替vm。
若要使用typescript,可使用以下方法来实现代码智能感知

vm = vm || this;

另:其他不能用vm变量,只能使用this变量的地方,都可以通过此方法来获得Typescript的智能感知和代码语法检查,比如mounted生命周期系列函数等。
不过模板里的vm引用Typescript无能为力,只能等待ts支持vue的jsx语法了╮(╯_╰)╭

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

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

计算属性必须引用(依赖)非计算属性或固定值。(见demo1)

计算属性若引用(依赖)其他计算属性,则被引用的计算属性必须引用非计算属性或固定值(见demo2)

计算属性可循环依赖,但最终依赖链上的最上游的计算属性,必须引用非计算属性或固定值。

DEMO1:官方标准用法,计算属性引用非计算属性:

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

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

var vm = new Vue({ el: "#app", data: { dataVal: "xxcanghai" }, 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数据)就会触发此问题。

<!--父组件HTML模板--> <div> <div>{{$children.length}}</div> <!--此处显示0,应该为3--> <child></child> <child></child> <child></child> </div> //子组件代码 Vue.component("child", { template: "<div>child</div>", }); //父组件声明 new Vue({ el: "#app", });

如下图:

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

解决方案1:使用\$forceUpdate()

注册父组件的mounted方法,执行$forceUpdate()

<div> <div>{{$children.length}}</div> <child></child> <child></child> <child></child> </div> Vue.component("child", { template: "<div>child</div>", }); new Vue({ el: "#app", mounted: function () { this.$forceUpdate();//强制重新绘制 } });

$children正确了:

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

解决方案2:使用vm的变量代替\$children

注册父组件的mounted方法,将$children赋值给自定义的vm的变量。
同时模板中使用自定义的变量来代替默认的$children

<div> <div>{{child.length}}</div> <!--使用自定义的child对象--> <child></child> <child></child> <child></child> </div> Vue.component("child", { template: "<div>child</div>", }); var vm = new Vue({ el: "#app", data: { child: [] }, mounted: function () { this.child = this.$children;//手动将$children对象赋值给自定义child变量 } });

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

至于导致此问题的原因只能通过阅读vue2.0版本的源码才能了解了。

4、若父组件的template或render函数中无引用slot元素,则\$children恒等于空数组

此问题关联上面第3个问题。
触发此问题的前提:

vue2.0版本

父组件和子组件都直接写在调用方模板中

在模板中访问$children变量

已经解决在上述问题3中强制刷新的问题

内容版权声明:除非注明,否则皆为本站原创文章。

转载注明出处:https://www.heiqu.com/wwxypp.html