关于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函数库)S.Sams Lifexperience ScriptClassLib
Apr 29 Javascript
JQuery实现table行折叠效果以JSON做数据源
May 26 Javascript
原生js事件的添加和删除的封装
Jul 01 Javascript
node.js中的fs.fchmod方法使用说明
Dec 16 Javascript
JavaScript计算两个日期时间段内日期的方法
Mar 16 Javascript
PhantomJS快速入门教程(服务器端的 JavaScript API 的 WebKit)
Aug 06 Javascript
你应该了解的JavaScript Array.map()五种用途小结
Nov 14 Javascript
详解Vue项目部署遇到的问题及解决方案
Jan 11 Javascript
JS中的变量作用域(console版)
Jul 18 Javascript
Javascript var变量删除原理及实现
Aug 26 Javascript
JavaScript的Set数据结构详解
Feb 18 Javascript
vue3使用vuedraggable实现拖拽功能
Apr 06 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实现Ftp用户的在线管理
2012/02/16 PHP
PHP中执行cmd命令的方法
2014/10/11 PHP
php5.3/5.4/5.5/5.6/7常见新增特性汇总整理
2020/02/27 PHP
javascript下阻止表单重复提交、防刷新、防后退
2007/08/17 Javascript
Jquery实现列表(隔行换色,全选,鼠标滑过当前行)效果实例
2013/06/09 Javascript
Javascript/Jquery——简单定时器的多种实现方法
2013/07/03 Javascript
Javascript和HTML5利用canvas构建Web五子棋游戏实现算法
2013/07/17 Javascript
js Calender控件使用详解
2015/01/05 Javascript
javascript正则表达式中的replace方法详解
2015/04/20 Javascript
Javascript中typeof 用法小结
2015/05/12 Javascript
JavaScript中的this机制
2016/01/30 Javascript
JsChart组件使用详解
2018/03/04 Javascript
socket io与vue-cli的结合使用的示例代码
2018/11/01 Javascript
vue获取data数据改变前后的值方法
2019/11/07 Javascript
Vue中img的src是动态渲染时不显示的解决
2019/11/14 Javascript
js实现上传按钮并显示缩略图小轮子
2020/05/04 Javascript
基于JavaScript实现表格隔行换色
2020/05/08 Javascript
Python操作MySQL数据库9个实用实例
2015/12/11 Python
深入解读Python解析XML的几种方式
2016/02/16 Python
python调用并链接MATLAB脚本详解
2019/07/05 Python
Django框架视图函数设计示例
2019/07/29 Python
python基于TCP实现的文件下载器功能案例
2019/12/10 Python
Idea安装python显示无SDK问题解决方案
2020/08/12 Python
基于Python采集爬取微信公众号历史数据
2020/11/27 Python
pycharm 关闭search everywhere的解决操作
2021/01/15 Python
伦敦剧院及景点门票:Encore Tickets
2018/07/01 全球购物
请写出一段Python代码实现删除一个list里面的重复元素
2015/12/29 面试题
2014年党员个人剖析材料
2014/10/08 职场文书
2015年精神文明建设工作总结
2015/04/21 职场文书
新郎接新娘保证书
2015/05/08 职场文书
活着观后感
2015/06/03 职场文书
运动会广播稿200字
2015/08/19 职场文书
2016十一国庆节感言
2015/12/09 职场文书
python基础入门之字典和集合
2021/06/13 Python
uni-app 微信小程序授权登录的实现步骤
2022/02/18 Javascript
MySQL学习必备条件查询数据
2022/03/25 MySQL