1. 每个 Vue 实例都会代理其 data 对象里所有的属性。

    2. 注意只有这些被代理的属性是响应的。如果在实例创建之后添加新的属性到实例上,它不会触发视图更新。

    3. 除了 data 属性,Vue实例暴露了一些有用的实例属性与方法。这些属性与方法都有前缀 $,以便与代理的 data 属性区分。

    模板语法

    1. Vue.js 使用了基于HTML的模版语法,允许开发者声明式地将 DOM 绑定至底层 Vue 实例的数据。所有 Vue.js 的模板都是合法的 HTML ,所以能被遵循规范的浏览器和 HTML 解析器解析。

    2. 在底层的实现上, Vue 将模板编译成虚拟DOM 渲染函数。结合响应系统,在应用状态改变时, Vue 能够智能地计算出重新渲染组件的最小代价并应用到 DOM 操作上。

    3. Mustache里面只能是JS表达式,否则不会生效。

    4. 指令的职责就是当其表达式的值改变时相应地将某些行为应用到 DOM 上

    5. 过滤器设计目的就是用于文本转换,为了在其他指令中实现更复杂的数据变换,你应该使用计算属性

    计算属性

    1. 计算属性方法在组件 beforeMount 之后,Mounted 之前都会执行一遍。

    2. 计算属性方法可以没有返回值。但是该属性使用,即在模板中使用了,否则不起任何作用。

    3. 不经过计算属性,我们可以在method中定义一个相同的函数来替代它。对于最终的结果,两种方式确实是相同的。然而,不同的是计算属性是基于它的依赖缓存计算属性只有在它的相关依赖发生改变时才会重新取值。这就意味着只要message没有发生改变,多次访问reversedMessage(computed内的一个方法)计算属性会立即返回之前的计算结果,而不必再次执行函数。

    4. 计算属性是依赖缓存的;而methods是没有缓存的,每次都执行一遍。

    5. 计算属性默认只有getter,不过在需要时你也可以提供一个 setter。参考官方实例:https://cn.vuejs.org/v2/guide/computed.html#计算-setter

    6. 当你想要在数据变化响应时,执行异步操作或开销较大的操作,water方法(或者 vm.$watch API)是很有用的。

    条件渲染

    1. 不同的是有 v-show 的元素会始终渲染并保持在 DOM 中。v-show 是简单的切换元素的 CSS 属性 display 。

    2. 一般来说, v-if 有更高的切换消耗而 v-show 有更高的初始渲染消耗。因此,如果需要频繁切换使用 v-show 较好,如果在运行时条件不大可能改变则使用 v-if 较好。

    3. vue尝试尽可能高效的渲染元素,通常会复用已有元素而不是从头开始渲染。但是条件渲染的时候,有时需要重新渲染而不是服用已有元素,所以可以通过设置唯一的key来实现元素不复用。参考官方例子:https://cn.vuejs.org/v2/guide/conditional.html#使用-key-控制元素的可重用

    列表渲染

    1. 在遍历对象时,是按 Object.keys() 的结果遍历,但是不能保证它的结果在不同的 JavaScript 引擎下是一致的。

    2. v-for 也可以取整数。在这种情况下,它将重复多次模板。

    3. 在用 v-for 渲染组件的时候,不能自动传递数据到组件里,因为组件有自己独立的作用域。为了传递迭代数据到组件里,我们要用 props。不自动注入 item 到组件里的原因是,因为这使得组件会紧密耦合到 v-for 如何运作。

    表单控件

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

    组件

    1. 在 Vue 里,一个组件实质上是一个拥有预定义选项的一个 Vue 实例。

    2. 使用组件时,大多数选项可以被传入到Vue构造器中,有一个例外: data 必须是函数。 原因的话,因为组件可能被多次调用,当data为普通对象时,data内的数据会被共享,当为函数的时候,则每个组件生成的为独立data作用域。

    3. 在 Vue.js 中,父子组件的关系可以总结为 props down, events up 。父组件通过 props 向下传递数据给子组件,子组件通过 events 给父组件发送消息。

    4. 注意在 JavaScript 中对象和数组是引用类型,指向同一个内存空间,如果 prop 是一个对象或数组,在子组件内部改变它会影响父组件的状态。

    5. Vue的事件系统分离自浏览器的EventTarget API。尽管它们的运行类似,但是on和on和emit 不是addEventListener 和 dispatchEvent 的别名。

    6. $refs 只在组件渲染完成后才填充,并且它是非响应式的。它仅仅作为一个直接访问子组件的应急方案——应当避免在模版或计算属性中使用 $refs 。

    响应原理

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

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

    数组解决方式:

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

    对象只能用第一种方式。

vue的一些注意点的更多相关文章

  1. Vue.js 和 MVVM 小细节

    MVVM 是Model-View-ViewModel 的缩写,它是一种基于前端开发的架构模式,其核心是提供对View 和 ViewModel 的双向数据绑定,这使得ViewModel 的状态改变可以自 ...

  2. wepack+sass+vue 入门教程(三)

    十一.安装sass文件转换为css需要的相关依赖包 npm install --save-dev sass-loader style-loader css-loader loader的作用是辅助web ...

  3. wepack+sass+vue 入门教程(二)

    六.新建webpack配置文件 webpack.config.js 文件整体框架内容如下,后续会详细说明每个配置项的配置 webpack.config.js直接放在项目demo目录下 module.e ...

  4. wepack+sass+vue 入门教程(一)

    一.安装node.js node.js是基础,必须先安装.而且最新版的node.js,已经集成了npm. 下载地址 node安装,一路按默认即可. 二.全局安装webpack npm install ...

  5. Vue + Webpack + Vue-loader 系列教程(2)相关配置篇

    原文地址:https://lvyongbo.gitbooks.io/vue-loader/content/ 使用预处理器 在 Webpack 中,所有的预处理器需要和一个相应的加载器一同使用.vue- ...

  6. Vue + Webpack + Vue-loader 系列教程(1)功能介绍篇

    原文地址:https://lvyongbo.gitbooks.io/vue-loader/content/ Vue-loader 是什么? vue-loader 是一个加载器,能把如下格式的 Vue ...

  7. 关于Vue.js 2.0 的 Vuex 2.0,你需要更新的知识库

    应用结构 实际上,Vuex 在怎么组织你的代码结构上面没有任何限制,相反,它强制规定了一系列高级的原则: 应用级的状态集中放在 store 中. 改变状态的唯一方式是提交mutations,这是个同步 ...

  8. Vue.js 2.0 和 React、Augular等其他框架的全方位对比

    引言 这个页面无疑是最难编写的,但也是非常重要的.或许你遇到了一些问题并且先前用其他的框架解决了.来这里的目的是看看Vue是否有更好的解决方案.那么你就来对了. 客观来说,作为核心团队成员,显然我们会 ...

  9. 窥探Vue.js 2.0 - Virtual DOM到底是个什么鬼?

    引言 你可能听说在Vue.js 2.0已经发布,并且在其中新添加如了一些新功能.其中一个功能就是"Virtual DOM". Virtual DOM是什么 在之前,React和Em ...

  10. 初探Vue

    Vue.js(读音/vju:/,类似于view),是近来比较火的前端框架,但一直没有怎么具体了解.实现过,就知道个啥的MVVM啦,数据驱动啦,等这些关于Vue的虚概念. 由于最近,小生在公司中,负责开 ...

随机推荐

  1. Linux 打包压缩与搜索命令

    1.tar 用于对文件进行打包压缩或解压,格式为tar[选项][文件],-f参数必须放到参数最后一位 tar -czvf etc.tar.gz /etc tar参数及作用 参数 作用 -c 创建压缩文 ...

  2. [UNITY 5.4 UGUI] 模态对话框

    1.建立两个画布 a.背景界面 b.置顶界面(添加一个 panel 控件) 2.修改置顶界面中 panel ,添加属性 [Canvas Group] 3.根据界面设计情况修改透明度,色彩,图片

  3. java异常——Exception、RuntimException

    一.Exception和RuntimeException的区别 Exception是RuntimeException的父类,使用了 Exception 的类都必须对异常进行处理(try / throw ...

  4. 【jira】java.lang.OutOfMemoryError: GC overhead limit exceeded

    登录JIRA访问打开缓慢,查询日志出现下述提示:java.lang.OutOfMemoryError: GC overhead limit exceeded 修改setenv.sh文件中的JVM配置, ...

  5. notepad++之删除空行

    正则表达式替换 查找目标: \r\n{0,1}[\s\t]*\r\n 替换为: \r\n 循环查找:勾选

  6. sql中的不常见查询

    1.对于CROSS APPLY 和 OUTER APPLY 的应用: CROSS APPLY 类似于INNER JOIN 但是,可以规定对于满足条件的数据需要关联几行,应用场景: 每个零件把第一个工单 ...

  7. 使用Idea从github上获取项目

    转载自:https://www.cnblogs.com/30go/p/7909246.html 整体分三步: 下载和安装git 配置idea 从git获取项目 详细步骤: 1. 下载和安装git 下载 ...

  8. Nginx配置反向代理服务器

    首先,在阅读<深入理解Nginx模块>后,大体了解了配置反向代理服务器一些常见的配置.如下进行说明:” l  Nginx worker进程个数 语法: worker_processes n ...

  9. MemoryStream说明

    MemoryStream 是内存流,为系统内存提供读写操作,由于 MemoryStream 是通过无符号字节数组组成的,可以说 MemoryStream 的性能可以算比较出色,所以它担当起了一些其他流 ...

  10. GIS案例学习笔记-三维生成和可视化表达

    GIS案例学习笔记-三维生成和可视化表达 联系方式:谢老师,135-4855-4328,xiexiaokui#qq.com 目的:针对栅格或者矢量数值型数据,进行三维可视化表达 操作时间:15分钟 案 ...