Vue.js在使用中的一些注意知识点


Posted in Javascript onApril 29, 2017

本文介绍的Vue.js在使用中的一些注意知识点,对大家具有一定的参考价值,下面来看看详细的介绍吧。

  • 每个 Vue 实例都会代理其 data 对象里所有的属性。
  • 注意只有这些被代理的属性是响应的。如果在实例创建之后添加新的属性到实例上,它不会触发视图更新。
  • 除了 data 属性,Vue实例暴露了一些有用的实例属性与方法。这些属性与方法都有前缀 $,以便与代理的 data 属性区分。

模板语法

  • Vue.js 使用了基于HTML的模版语法,允许开发者声明式地将 DOM 绑定至底层 Vue 实例的数据。所有 Vue.js 的模板都是合法的 HTML ,所以能被遵循规范的浏览器和 HTML 解析器解析。
  • 在底层的实现上, Vue 将模板编译成虚拟DOM 渲染函数。结合响应系统,在应用状态改变时, Vue 能够智能地计算出重新渲染组件的最小代价并应用到 DOM 操作上。
  • Mustache里面只能是JS表达式,否则不会生效。
  • 指令的职责就是当其表达式的值改变时相应地将某些行为应用到 DOM 上。
  • 过滤器设计目的就是用于文本转换,为了在其他指令中实现更复杂的数据变换,你应该使用计算属性。

计算属性

  • 计算属性方法在组件 beforeMount 之后,Mounted 之前都会执行一遍。
  • 计算属性方法可以没有返回值。但是该属性使用,即在模板中使用了,否则不起任何作用。
  • 不经过计算属性,我们可以在method中定义一个相同的函数来替代它。对于最终的结果,两种方式确实是相同的。然而,不同的是计算属性是基于它的依赖缓存。计算属性只有在它的相关依赖发生改变时才会重新取值。这就意味着只要message没有发生改变,多次访问reversedMessage(computed内的一个方法)计算属性会立即返回之前的计算结果,而不必再次执行函数。
  • 计算属性是依赖缓存的;而methods是没有缓存的,每次都执行一遍。
  • 计算属性默认只有getter,不过在需要时你也可以提供一个 setter。参考官方实例:https://cn.vuejs.org/v2/guide/computed.html#计算-setter
  • 当你想要在数据变化响应时,执行异步操作或开销较大的操作,water方法(或者 vm.$watch API)是很有用的。

条件渲染

  • 不同的是有 v-show 的元素会始终渲染并保持在 DOM 中。v-show 是简单的切换元素的 CSS 属性 display 。
  • 一般来说, v-if 有更高的切换消耗而 v-show 有更高的初始渲染消耗。因此,如果需要频繁切换使用 v-show 较好,如果在运行时条件不大可能改变则使用 v-if 较好。
  • vue尝试尽可能高效的渲染元素,通常会复用已有元素而不是从头开始渲染。但是条件渲染的时候,有时需要重新渲染而不是服用已有元素,所以可以通过设置唯一的key来实现元素不复用。参考官方例子:https://cn.vuejs.org/v2/guide/conditional.html#使用-key-控制元素的可重用

列表渲染

  • 在遍历对象时,是按 Object.keys() 的结果遍历,但是不能保证它的结果在不同的 JavaScript 引擎下是一致的。
  • v-for 也可以取整数。在这种情况下,它将重复多次模板。
  • 在用 v-for 渲染组件的时候,不能自动传递数据到组件里,因为组件有自己独立的作用域。为了传递迭代数据到组件里,我们要用 props。不自动注入 item 到组件里的原因是,因为这使得组件会紧密耦合到 v-for 如何运作。

表单控件

  • 对于单选按钮,勾选框及选择列表选项, v-model 绑定的 value 通常是静态字符串(对于勾选框是逻辑值)。

组件

  • 在 Vue 里,一个组件实质上是一个拥有预定义选项的一个 Vue 实例。
  • 使用组件时,大多数选项可以被传入到Vue构造器中,有一个例外: data 必须是函数。 原因的话,因为组件可能被多次调用,当data为普通对象时,data内的数据会被共享,当为函数的时候,则每个组件生成的为独立data作用域。
  • 在 Vue.js 中,父子组件的关系可以总结为 props down, events up 。父组件通过 props 向下传递数据给子组件,子组件通过 events 给父组件发送消息。
  • 注意在 JavaScript 中对象和数组是引用类型,指向同一个内存空间,如果 prop 是一个对象或数组,在子组件内部改变它会影响父组件的状态。
  • Vue的事件系统分离自浏览器的EventTarget API。尽管它们的运行类似,但是on和on和emit 不是addEventListener 和 dispatchEvent 的别名。
  • $refs 只在组件渲染完成后才填充,并且它是非响应式的。它仅仅作为一个直接访问子组件的应急方案——应当避免在模版或计算属性中使用 $refs 。

响应原理

vue中的数据双向绑定中,只有改变vue实例上的属性时才能动态更新试图。

当data中有一个属性为对象和数组时,直接修改对象和数组的某一项数据是没办法触发试图更新的。https://vuefe.cn/v2/guide/list.html#注意事项 https://vuefe.cn/v2/guide/reactivity.html#变化检测问题

数组解决方式:

Vue.set(example1.items, indexOfItem, newValue);
example1.items.splice(indexOfItem, 1, newValue)

对象只能用第一种方式。

总结

以上就是这篇文章的全部内容了,希望本文的内容对大家的学习或者工作能带来一定的帮助,如果有疑问大家可以留言交流,谢谢大家对三水点靠木的支持。

Javascript 相关文章推荐
js textarea自动增高并隐藏滚动条
Dec 16 Javascript
ajax java 实现自动完成功能
Dec 19 Javascript
js获取当前日期时间及其它日期操作汇总
Mar 08 Javascript
Jquery 整理元素选取、常用方法一览表
Nov 26 Javascript
JavaScript如何一次性展示几万条数据
Mar 30 Javascript
微信小程序 获取session_key和openid的实例
Aug 17 Javascript
详解webpack提取第三方库的正确姿势
Dec 22 Javascript
node.js连接mysql与基本用法示例
Jan 05 Javascript
微信小程序实现简单表格
Feb 14 Javascript
vue实现的微信机器人聊天功能案例【附源码下载】
Feb 18 Javascript
JavaScript刷新页面的几种方法总结
Mar 28 Javascript
解决vant框架做H5时踩过的坑(下拉刷新、上拉加载等)
Nov 11 Javascript
jQuery实现按比例缩放图片的方法
Apr 29 #jQuery
Vue开发中整合axios的文件整理
Apr 29 #Javascript
Vue.js教程之axios与网络传输的学习实践
Apr 29 #Javascript
jQuery输入框密码的显示隐藏【代码分享】
Apr 29 #jQuery
jQuery实现多张图片上传预览(不经过后端处理)
Apr 29 #jQuery
jQuery设置图片等比例缩小的方法
Apr 29 #jQuery
Angular2下使用pdf插件的方法详解
Apr 29 #Javascript
You might like
php连接函数implode与分割explode的深入解析
2013/06/26 PHP
php curl请求信息和返回信息设置代码实例
2015/04/27 PHP
PHP中Session和Cookie是如何操作的
2015/10/10 PHP
php正则去除网页中所有的html,js,css,注释的实现方法
2016/11/03 PHP
php实现的redis缓存类定义与使用方法示例
2017/08/09 PHP
PHP实现的多维数组去重操作示例
2018/07/21 PHP
浅析php如何实现爬取数据原理
2018/09/27 PHP
解决windows上php xdebug 无法调试的问题
2020/02/19 PHP
js几个验证函数代码
2010/03/25 Javascript
jQuery中使用Ajax获取JSON格式数据示例代码
2013/11/26 Javascript
基于iframe实现类似于ajax的页面无刷新
2014/05/31 Javascript
JavaScript实现给按钮加上双重动作的方法
2015/08/14 Javascript
基于insertBefore制作简单的循环插空效果
2015/09/21 Javascript
smartupload实现文件上传时获取表单数据(推荐)
2016/12/12 Javascript
JS触摸事件、手势事件详解
2017/05/04 Javascript
jQuery Validate 无法验证 chosen-select元素的解决方法
2017/05/17 jQuery
微信浏览器禁止页面下拉查看网址实例详解
2017/06/28 Javascript
小程序二次贝塞尔曲线实现购物车商品曲线飞入效果
2019/01/07 Javascript
原生JS实现列表内容自动向上滚动效果
2019/05/22 Javascript
element跨分页操作选择详解
2020/06/29 Javascript
JS绘图Flot如何实现动态可刷新曲线图
2020/10/16 Javascript
Django1.3添加app提示模块不存在的解决方法
2014/08/26 Python
使用Python制作获取网站目录的图形化程序
2015/05/04 Python
scrapy爬虫完整实例
2018/01/25 Python
Python 使用 attrs 和 cattrs 实现面向对象编程的实践
2019/06/12 Python
python opencv调用笔记本摄像头
2019/08/28 Python
python操作docx写入内容,并控制文本的字体颜色
2020/02/13 Python
Python unittest如何生成HTMLTestRunner模块
2020/09/08 Python
python用opencv 图像傅里叶变换
2021/01/04 Python
Melijoe时尚童装德国官网:Melijoe德国
2016/09/03 全球购物
法国购买隐形眼镜和眼镜网站:Optical Center
2019/10/08 全球购物
英语自荐信常用语句
2013/12/13 职场文书
幼儿园元旦活动感言
2014/03/02 职场文书
关于安全演讲稿
2014/05/09 职场文书
员工安全生产承诺书
2014/05/22 职场文书
婚宴父亲致辞
2015/07/27 职场文书