Vue.js在使用中的一些注意知识点
本文介绍的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.$watchAPI）是很有用的。
条件渲染
- 不同的是有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中，父子组件的关系可以总结为propsdown,eventsup。父组件通过props向下传递数据给子组件，子组件通过events给父组件发送消息。
- 注意在JavaScript中对象和数组是引用类型，指向同一个内存空间，如果prop是一个对象或数组，在子组件内部改变它会影响父组件的状态。
- Vue的事件系统分离自浏览器的EventTargetAPI。尽管它们的运行类似，但是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)
对象只能用第一种方式。
总结
以上就是这篇文章的全部内容了，希望本文的内容对大家的学习或者工作能带来一定的帮助，如果有疑问大家可以留言交流，谢谢大家对毛票票的支持。