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

序

本文不是vue教程，只是个人在学习vue过程中的理解和注意事项。如有不妥，请指正并讨论

1.vm变量不能在计算属性函数中使用

在计算属性的函数中，Vue构造函数返回的vm变量不能使用，因为vm还没有返回，还在Vue内部构造函数的过程中，所以只能用这个代替vm。要使用typescript，可以使用以下方法来实现代码智能

vm=vm | | this

此外，其他不能使用vm变量但只能使用该变量的地方，可以通过该方法获得Typescript的智能感知和代码语法检查，比如挂载的生命周期系列函数。但是，模板中vm引用的Typescript是无能为力的，所以我们只能等待ts支持vue(_)的jsx语法

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

官方教程没有相关解释(应该找不到)。从使用的角度，可以大致总结出以下结论：

计算属性必须引用(依赖)非计算属性或固定值。(参见demo1)如果计算属性引用(取决于)其他计算属性，则引用的计算属性必须引用非计算属性或固定值(参见demo2)。计算属性可以循环依赖，但最终依赖于链中最上游的计算属性，并且必须引用非计算属性或固定值。DEMO1:官方标准用法，计算属性指非计算属性：

Varvm=newvue ({el:' # app '，data: {dataval :' xx仓海' }，computed : { computed val 1: function(){//标准用法，计算属性引用非计算属性返回this.dataVal ' _ 1//输出xxchanghai _ 1 } } })；DEMO2:如果计算属性链依赖于其他计算属性，依赖链头必须引用非计算属性或固定值

var vm=new Vue({ el: '#app '，data : { dataval : ' xxchanghai ' }，computed : { computed val 1: function(){ return this . dataval ' _ 1 '；}，computedval2: function(){//是合法的，computed val 2引用computedVal1，computedVal1引用dataval返回这个。computedval 1 ' _ 2//输出xx仓海_ 1 _ 2 } })；原因很容易理解。如果最终没有对任何非计算属性的引用或依赖，则计算属性将在计算过程中陷入无限循环。

3.如果在vue2.0中使用了组件嵌套，则在父组件执行\$forceUpdate()之前，\$children是模板中的一个空数组

触发此问题有几个先决条件：

vue版本是2.0版本，1.0没有这样的问题。使用组件嵌套，在父组件的模板中访问$children变量，如果在渲染后$children变量没有被写入父组件的数据变量(或其他vm数据)，将会触发这个问题。-父组件HTML模板-div id=' app' div {{$ children。长度}}/div！-0在这里显示，应该是3-child/child child/child/child/div//子组件代码vue.component ('child '，{template:' div child/div '，})；//父组件声明新的Vue({ el: '#app '，})；下图：

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

注册父组件的挂载方法并执行$forceUpdate()

div id=' app ' div { { $ children . length } }/div child/child child/child/divvue.component(' child '，{ template: 'divchild/div '，})；new Vue({ el: '#app '，mounted: function () { this。$ force update()；//strong制重绘} })；$children是正确的：

解决方案2:用虚拟机的变量替换\ $子级

注册父组件的挂载方法，并将$children分配给自定义vm的变量。同时，模板使用自定义变量而不是默认的$children

div id=' app ' div { { child . length } }/div！-使用自定义子对象-child/child child/child child/child/div vue.component(' child '，{template3360' divchild/div '，})；var vm=new Vue({ el: '#app '，data: { child: [] }，mount ed : function(){ this . child=this。$儿童；//手动将$children对象分配给自定义子变量} })；

这个问题的原因只能通过阅读vue2.0的源代码来理解。

4.如果父组件的模板或呈现函数中没有引用槽元素，\$children始终等于一个空数组

这个问题和上面的第三个问题有关。触发此问题的先决条件：

2.0版本的父组件和子组件直接写在调用者模板中。访问模板中的$children变量解决了上述问题3中的强制刷新问题。div id='app '！-子组件直接写在调用者的模板中-parent child/child child/child child/child/parent/div//parent component vue.component(' parent '，{ template 3360 ' p parent child : { $ children。length}}/p '，//没有安装插槽元素(){ this。$ force update()；}});Vue.component('child '，{ template : ' div child/div ' })；var VM=new Vue({ El : ' # app ' })；

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

将插槽元素添加到父组件的模板中。或者这个。$ slots . render函数中引用了默认变量

Vue.component('parent '，{ template : ' PP apprent child : { { $ children . length } } slot/slot/p '，已挂载(){ this。$ force update()；}});

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

这个解决方案需要修改这个问题反复出现的第二个元素，即子组件定义可以写入父组件的模板，而不是调用方。

Div id=' app '父/父/divvue。组件(' parent '，{//编写调用子组件标签template 3360 ' p parent child : { { $ children。length } } \ child/child \ child/child \/p '，mountain } })；Vue.component('child '，{ template: 'divchild/div '，})；var vm=new Vue({ el: '#app '，data : { child :[]})；

虽然这种方法可以解决问题，但有时我们直接在调用者身上编写子组件更方便，也更容易理解，比如Tab和TabPage组件。下面的Tab组件代码可能更符合普通人的使用思路：

Div id=' app '选项卡选项卡-页面1/选项卡-页面选项卡-页面2/选项卡-页面选项卡-页面选项卡-页面3/选项卡-页面/选项卡/div相关注释

Vue研究说明-1(www . JB 51 . net/article/98869 . htm)

Vue研究说明-2(www . JB 51 . net/article/98878 . htm)

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

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