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

网络编程 2024/11/16 佚名

3 1 2

前言

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

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 id="app">
 <div>{{$children.length}}</div> <!--此处显示0，应该为3-->
 <child></child>
 <child></child>
 <child></child>
</div>

//子组件代码
Vue.component("child", {
 template: "<div>child</div>",
});

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

如下图：

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

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

<div id="app">
 <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正确了：

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

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

<div id="app">
 <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变量
 }
});

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

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

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

vue2.0版本
父组件和子组件都直接写在调用方模板中
在模板中访问$children变量
已经解决在上述问题3中强制刷新的问题

<div id="app">
 <!--子组件直接写在调用方的模板中-->
 <parent>
 <child></child>
 <child></child>
 <child></child>
 </parent>
</div>

//父组件
Vue.component("parent", {
 template: "<p>parent child:{{$children.length}} </p>",//模板中无slot元素
 mounted(){
 this.$forceUpdate();
 }
});
Vue.component("child", {
 template: "<div>child</div>"
});

var vm = new Vue({
 el: "#app"
});

解决方案1:父组件模板包含slot元素

在父组件的模板中加入slot元素。或在render函数中引用了this.$slots.default变量

Vue.component("parent", {
 template: "<p>parent child:{{$children.length}} <slot></slot></p>",
 mounted(){
 this.$forceUpdate();
 }
});

解决方案2：在父组件模板中编写子组件定义

此解决方案要修改此问题的复现第2要素，即子组件定义从调用方改为写到父组件的模板中也可解决此问题。

<div id="app">
 <parent>
 </parent>
</div>

Vue.component("parent", {
 //直接在父组件中写明调用子组件标签
 template: "<p>parent child:{{$children.length}} <child></child> <child></child> </p>",
 mounted(){
 this.$forceUpdate();
 }
});
Vue.component("child", {
 template: "<div>child</div>",
});

var vm = new Vue({
 el: "#app",
 data: {
 child: []
 }
});

此方法虽然可以解决问题，但是有时我们直接把子组件写在调用方会更方便更利于理解，比如Tab与TabPage组件。
如下Tab组件代码，可能更符合一般人的使用思维：

<div id="app">
 <tab>
 <tab-page>Page1</tab-page>
 <tab-page>Page2</tab-page>
 <tab-page>Page3</tab-page>
 </tab>
</div>

相关笔记

Vue学习笔记-1(https://www.jb51.net/article/98869.htm)

Vue学习笔记-2(https://www.jb51.net/article/98878.htm)

本文已被整理到了《Vue.js前端组件学习教程》，欢迎大家学习阅读。

以上就是本文的全部内容，希望对大家的学习有所帮助，也希望大家多多支持。

Vue.js,computed,组件

华山资源网 Design By www.eoogi.com

广告合作：本站广告合作请联系QQ：858582 申请时备注：广告合作（否则不回）
免责声明：本站资源来自互联网收集,仅供用于学习和交流,请遵循相关法律法规,本站一切资源不代表本站立场,如有侵权、后门、不妥请联系本站删除！

华山资源网 Design By www.eoogi.com

评论“关于Vue.js一些问题和思考学习笔记（2）”

暂无评论...

www.eoogi.com 华山资源网

120,135影音资源

344,641技术资源

22,817软件资源

435,032站长资源

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

Vue2实现组件props双向绑定

基于jQuery实现表格的排序

评论“关于Vue.js一些问题和思考学习笔记（2）”

RTX 5090要首发性能要翻倍！三星展示GDDR7显存

更新日志

友情链接

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

Vue2实现组件props双向绑定

基于jQuery实现表格的排序

评论“关于Vue.js一些问题和思考学习笔记（2）”

RTX 5090要首发 性能要翻倍！三星展示GDDR7显存

更新日志

友情链接

RTX 5090要首发性能要翻倍！三星展示GDDR7显存