时间:2021-05-25
前言
本文非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:官方标准用法,计算属性引用非计算属性:
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为空数组
触发这个问题有以下几个前提:
如下图:
解决方案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
至于导致此问题的原因只能通过阅读vue2.0版本的源码才能了解了。
4、若父组件的template或render函数中无引用slot元素,则\$children恒等于空数组
此问题关联上面第3个问题。
触发此问题的前提:
解决方案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组件代码,可能更符合一般人的使用思维:
相关笔记
Vue学习笔记-1()
Vue学习笔记-2()
本文已被整理到了《Vue.js前端组件学习教程》,欢迎大家学习阅读。
以上就是本文的全部内容,希望对大家的学习有所帮助,也希望大家多多支持。
声明:本页内容来源网络,仅供用户参考;我单位不保证亦不表示资料全面及准确无误,也不保证亦不表示这些资料为最新信息,如因任何原因,本网内容或者用户因倚赖本网内容造成任何损失或损害,我单位将不会负任何法律责任。如涉及版权问题,请提交至online#300.cn邮箱联系删除。
前言本文不是Vue.js的教程,只是一边看官网Vue的教程文档一边记录并总结学习过程中遇到的一些问题和思考的笔记。1、vue和avalon一样,都不支持VM初始
做为一名学习路上的小白,起初就对vue.js有着莫名的好感,知道vue.js也能实现angular.js的双向绑定等一些功能后,妥妥的先把angular.js和
vue.js源代码学习笔记corescedule.js,供大家参考,具体内容如下importtypeWatcherfrom'./watcher
本文主要给大家介绍了关于vue.js发布后路径引用问题的解决方法,分享出来供大家参考学习,下面话不多说了,来一起看看详细的介绍:在发布到iis目录下时候,如果放
现在来系统地学习一下Vue(参考vue.js官方文档):Vue.js是一个构建数据驱动的web界面的库,其目标是实现响应的数据绑定和组合的试图组件。Vue.js