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


Posted in Javascript onDecember 02, 2016

前言

本文非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",
});

如下图:

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

解决方案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正确了:

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

解决方案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变量
 }
});

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

至于导致此问题的原因只能通过阅读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"
});

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

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

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

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

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

解决方案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: []
 }
});

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

此方法虽然可以解决问题,但是有时我们直接把子组件写在调用方会更方便更利于理解,比如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://3water.com/article/98869.htm)

Vue学习笔记-2(https://3water.com/article/98878.htm)

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

以上就是本文的全部内容,希望对大家的学习有所帮助,也希望大家多多支持三水点靠木。

Javascript 相关文章推荐
js中匿名函数的N种写法
Sep 08 Javascript
与jquery serializeArray()一起使用的函数,主要来方便提交表单
Jan 31 Javascript
读jQuery之七 判断点击了鼠标哪个键的代码
Jun 21 Javascript
Fixie.js 自动填充内容的插件
Jun 28 Javascript
使用node.js半年来总结的 10 条经验
Aug 18 Javascript
纯JS实现旋转图片3D展示效果
Apr 12 Javascript
JQuery球队选择实例
May 18 Javascript
使用EVAL处理jqchart jquery 折线图返回数据无效的解决办法
Nov 26 Javascript
正则表达式优化JSON字符串的技巧
Dec 24 Javascript
微信小程序自定义组件实现tabs选项卡功能
Jul 14 Javascript
vue后台管理之动态加载路由的方法
Aug 13 Javascript
JavaScript代码简化技巧实例解析
Sep 09 Javascript
基于jQuery实现表格的排序
Dec 02 #Javascript
利用jQuery插件imgAreaSelect实现图片上传裁剪(放大缩小)
Dec 02 #Javascript
关于Vue.js一些问题和思考学习笔记(1)
Dec 02 #Javascript
利用jQuery来动态为属性添加或者删除属性的简单方法
Dec 02 #Javascript
基于javascript实现的快速排序
Dec 02 #Javascript
微信公众平台开发教程(五)详解自定义菜单
Dec 02 #Javascript
基于jQuery实现滚动切换效果
Dec 02 #Javascript
You might like
当海贼王变成JOJO风
2020/03/02 日漫
PHP容易忘记的知识点分享
2013/04/30 PHP
浅析使用Turck-mmcache编译来加速、优化PHP代码
2013/06/20 PHP
基于laravel缓冲cache的用法详解
2019/10/23 PHP
JavaScript伸缩的菜单简单示例
2013/12/03 Javascript
实用又漂亮的BootstrapValidator表单验证插件
2016/05/30 Javascript
微信小程序 石头剪刀布实例代码
2017/01/04 Javascript
详解nodejs的express如何自动生成项目框架
2017/07/12 NodeJs
vue组件与复用详解
2018/04/08 Javascript
详解Vue源码学习之callHook钩子函数
2018/07/25 Javascript
微信小程序—setTimeOut定时器的问题及解决
2019/07/26 Javascript
vue中如何实现后台管理系统的权限控制的方法步骤
2019/09/05 Javascript
vue 中固定导航栏的实例代码
2019/11/01 Javascript
解决Vue项目中tff报错的问题
2020/10/21 Javascript
[38:27]完美世界DOTA2联赛PWL S2 Forest vs FTD.C 第二场 11.26
2020/11/30 DOTA
浅谈python下含中文字符串正则表达式的编码问题
2018/12/07 Python
python print输出延时,让其立刻输出的方法
2019/01/07 Python
解决Python3 被PHP程序调用执行返回乱码的问题
2019/02/16 Python
使用python实现简单五子棋游戏
2019/06/18 Python
python实现猜拳游戏
2020/03/04 Python
python 下载m3u8视频的示例代码
2020/11/11 Python
英国著名国际平价时尚男装品牌:Topman
2016/08/27 全球购物
德国EGOIST网店:销售畅销的设计师品牌
2017/04/18 全球购物
西班牙鞋子和箱包在线销售网站:zapatos.es
2020/02/17 全球购物
StringBuilder和String的区别
2015/05/18 面试题
J2EE中的容器都包括哪些
2013/08/21 面试题
迎新晚会邀请函
2014/02/01 职场文书
2014年保密工作总结
2014/11/22 职场文书
新生儿未入户证明
2015/06/23 职场文书
关爱留守儿童主题班会
2015/08/13 职场文书
班委竞选稿范文
2015/11/21 职场文书
幼儿园六一儿童节开幕词
2016/03/04 职场文书
2016年清明节网上祭英烈活动总结
2016/04/01 职场文书
一篇文章弄懂MySQL查询语句的执行过程
2021/05/07 MySQL
Vue详细的入门笔记
2021/05/10 Vue.js
Springboot集成kafka高级应用实战分享
2022/08/14 Java/Android