关于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 控制非法字符的输入代码
Dec 04 Javascript
cookie中的path与domain属性详解
Dec 18 Javascript
jQuery中children()方法用法实例
Jan 07 Javascript
jQuery实现上传图片前预览效果功能
Aug 03 jQuery
bootstrap table实现x-editable的行单元格编辑及解决数据Empty和支持多样式问题
Aug 10 Javascript
微信小程序如何获取openid及用户信息
Jan 26 Javascript
js动态引入的四种方法
May 05 Javascript
JavaScript Date对象功能与用法学习记录
Apr 28 Javascript
写一个Vue loading 插件
Nov 09 Javascript
详解Vue 的异常处理机制
Nov 30 Vue.js
js制作提示框插件
Dec 24 Javascript
JavaScript事件的委托(代理)的用法示例详解
Feb 18 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
Discuz!5的PHP代码高亮显示插件(黑暗中的舞者更新)
2007/01/29 PHP
PHP中spl_autoload_register()和__autoload()区别分析
2014/05/10 PHP
JTrackBar水平拖动效果
2007/07/15 Javascript
js使用removeChild方法动态删除div元素
2014/08/01 Javascript
js通过iframe加载外部网页的实现代码
2015/04/05 Javascript
jquery获得当前html页面源码的方法
2015/07/14 Javascript
浅谈$(document)和$(window)的区别
2015/07/15 Javascript
js简单实现Select互换数据的方法
2015/08/17 Javascript
解析JavaScript中的字符串类型与字符编码支持
2016/06/24 Javascript
jquery动态遍历Json对象的属性和值的方法
2016/07/27 Javascript
JavaScript九九乘法口诀表的简单实现
2016/10/04 Javascript
详解http访问解析流程原理
2017/10/18 Javascript
vue实现a标签点击高亮方法
2018/03/17 Javascript
详解Angular5 路由传参的3种方法
2018/04/28 Javascript
微信小程序仿朋友圈发布动态功能
2018/07/15 Javascript
Vue无限滑动周选择日期的组件的示例代码
2018/07/18 Javascript
javascript数组去重方法总结(推荐)
2019/03/20 Javascript
微信小程序 组件的外部样式externalClasses使用详解
2019/09/06 Javascript
JavaScript实现电灯开关小案例
2020/03/30 Javascript
[02:20]DOTA2英雄基础教程 黑暗贤者
2013/12/19 DOTA
给Python中的MySQLdb模块添加超时功能的教程
2015/05/05 Python
python代码 FTP备份交换机配置脚本实例解析
2019/08/01 Python
OpenCV python sklearn随机超参数搜索的实现
2020/01/17 Python
安装完Python包然后找不到模块的解决步骤
2020/02/13 Python
Python3的socket使用方法详解
2020/02/18 Python
利用scikitlearn画ROC曲线实例
2020/07/02 Python
HTML5添加鼠标悬浮音响效果不使用FLASH
2014/04/23 HTML / CSS
哄娃神器4moms商店:美国婴童用品品牌
2019/03/07 全球购物
教师远程培训感言
2014/03/06 职场文书
村干部培训班主持词
2014/03/28 职场文书
大学社团计划书
2014/05/01 职场文书
写给孩子的新学期寄语
2015/02/27 职场文书
2015年安全生产管理工作总结
2015/05/25 职场文书
入党积极分子培养联系人意见
2015/08/12 职场文书
2019个人半年工作总结
2019/06/21 职场文书
PHP控制循环操作的时间
2021/04/01 PHP