关于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 相关文章推荐
jqGrid增加时--判断开始日期与结束日期(实例解析)
Nov 08 Javascript
简述Matlab中size()函数的用法
Mar 20 Javascript
基于JS快速实现导航下拉菜单动画效果附源码下载
Oct 27 Javascript
基于JavaScript实现图片剪切效果
Mar 07 Javascript
详解AngularJs路由之Ui-router-resolve(预加载)
Jun 13 Javascript
vue.js根据代码运行环境选择baseurl的方法
Feb 28 Javascript
解决Vue打包之后文件路径出错的问题
Mar 06 Javascript
Angular 实现输入框中显示文章标签的实例代码
Nov 07 Javascript
微信小程序表单验证WxValidate的使用
Nov 27 Javascript
基于Vue的侧边目录组件的实现
Feb 05 Javascript
5种方法告诉你如何使JavaScript 代码库更干净
Sep 15 Javascript
vue 给数组添加新对象并赋值
Apr 20 Vue.js
基于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
php无限极分类递归排序实现方法
2014/11/11 PHP
php递归遍历多维数组的方法
2015/04/18 PHP
使用PHPStorm+XDebug搭建单步调试环境
2017/11/19 PHP
safari下载文件自动加了html后缀问题
2018/11/09 PHP
匹配任意字符的正则表达式写法
2010/04/29 Javascript
jquery的live使用注意事项
2014/02/18 Javascript
Jquery实现地铁线路指示灯提示牌效果的方法
2015/03/02 Javascript
jQuery版本升级踩坑大全
2016/01/12 Javascript
JS中的forEach、$.each、map方法推荐
2016/04/05 Javascript
Ztree新增角色和编辑角色回显问题的解决
2016/10/25 Javascript
浅析javaScript中的浅拷贝和深拷贝
2017/02/15 Javascript
jQuery插件artDialog.js使用与关闭方法示例
2017/10/09 jQuery
Vue.js划分组件的方法
2017/10/29 Javascript
vue路由懒加载的实现方法
2018/03/12 Javascript
JavaScript设计模式之观察者模式(发布订阅模式)原理与实现方法示例
2018/07/27 Javascript
vue实现的下拉框功能示例
2019/01/29 Javascript
微信小程序的tab选项卡的实现效果
2019/05/15 Javascript
vue实现条件叠加搜索的解决方法
2019/05/28 Javascript
通过原生vue添加滚动加载更多功能
2019/11/21 Javascript
微信小程序文章列表功能完整实例
2020/06/03 Javascript
解决vant title-active-color与title-inactive-color不生效问题
2020/11/03 Javascript
python删除某个字符
2018/03/19 Python
用Python实现最速下降法求极值的方法
2019/07/10 Python
如何利用pygame实现简单的五子棋游戏
2019/12/29 Python
Python中的 ansible 动态Inventory 脚本
2020/01/19 Python
python代码区分大小写吗
2020/06/17 Python
小学生期末自我鉴定
2014/01/19 职场文书
毕业生如何写自我鉴定
2014/03/15 职场文书
2014预备党员党课学习心得范文
2014/07/08 职场文书
妈妈活动方案
2014/08/15 职场文书
2015年创先争优工作总结
2015/05/23 职场文书
PHP命令行与定时任务
2021/04/01 PHP
MySQL系列之八 MySQL服务器变量
2021/07/02 MySQL
MySQL如何解决幻读问题
2021/08/07 MySQL
js不常见操作运算符总结
2021/11/20 Javascript
Redis Lua脚本实现ip限流示例
2022/07/15 Redis