vue2文档记录

最新推荐文章于 2024-04-25 22:00:38 发布

Ahiase

最新推荐文章于 2024-04-25 22:00:38 发布

阅读量348

点赞数

文章标签：前端 javascript vue.js

本文链接：https://blog.csdn.net/qq_57597418/article/details/127201406

版权

使用Object.freeze()阻止修改现有的property（在vue实例外部添加的实例对象）
Object.freeze(obj);
var obj={foo:'aaaa'};
注意不要再选项property或回调上去使用箭头函数，因为箭头函数没有this,this会作为变量一直向上级词法作用域查找，直到找到为止，会报错
v-html,{ {}}等不适合使用作为复合局部模板，因为Vue不是基于字符串的模板引擎，Mustache 语法不能作用在 HTML attribute 上，遇到这种情况应该使用 v-bind 指令，如果想用模板还是直接组件重用
计算属性computed和方法名methods不能同名
watch形参包括侦听的新值与旧值(newValue,oldValue)
watch当需要在数据变化时执行异步或开销较大的操作使用比较合适
计算属性computed是基于它们的响应式依赖进行缓存的，
为什么需要缓存：
当我么有一个性能开销较大的计算属性A，它需要遍历一个巨大的数组大量的进行计算
其他的计算属性依赖于A,如果没有缓存，就不可避免多次执getter
如果不想要缓存可以用方法来代替
计算属性的getter与setter(默认只有getter,但是想要也可以设置setter)
_.debounce（防抖）是一个通过Lodash限制操作频率的函数
（一次性发出很多操作，丹斯在间隔时间后才执行一次操作）
_.throttle（节流），其实和节流阀很像的一个东西，就是限制每次操作一定要间隔多少时间后才能执行一次，就是把多次变成较少次执行的函数
.class绑定
//active,text-danger是class样式名
1.<div v-bind:class="{active:isActive,'text-danger':hasError}">123456</div>
绑定的数据对象不必内联定义在模板中(使用以对象的形式)
2.<div v-bind:class='classObject'>123456</div>
data:{
isActive:true,
hasError:false,
classObject:{
active:true,
'text-danger':true
}
}
也可以使用计算属性去求值得到
classObject:function(){
return{ active: 逻辑,'text-danger': 逻辑 }
}
使用数组语法，以应用一个class列表
<div v-bind:class="[activeClass,errorClass]"></div>
data:{
activeClass:'active',
errorClass:'text-danger'
}
键值与数组可以混合使用
<div v-bind:class="[{active:isActive},errorClass]"></div>
组件中的css样式不会被覆盖而合并
<my-component class="active text-danger">12345</my-component>
Vue.component('my-component',{
template:'<p class="foo bar">Hi</p>'
})
//会被渲染成<p class="foo bar active text-danger">Hi</p>
v-bind:style绑定内联样式，驼峰式或点横线分隔命令
键值与数组都可以使用
多重值
<div :style="{display:['-webkit-box','-ms-flexbox','flex']}"></div>//只会渲染display:flex
当v-if和v-else中使用了相同的元素，例如input那就不会清除用户输入的内容，只会复用后替换掉placeholder
注意：但是这两个元素是独立存在的，不能切换的时候还不清除其中的内容，所以不用复用它们，而是添加一个具有唯一值的key使得被重新渲染
eg.<template v-if='表达式'><input placeholder='123' key='username-input'></template>
<template v-else>
<input placehold='321' key='email-input'>
</template>
如果其中有label元素仍然会被高效的复用，因为没有添加key
18.v-show只是简单地切换元素display,不支持<template>，也不支持v-else
v-if和v-show
v-if是真正地条件渲染，切换过程中条件块内地事件监听器和子组件适当地销毁和重建
v-if是惰性的，如果条件为假的时候不去渲染，当为真的时候才会渲染块（对DOM的render Tree进行真正的操作）
而v-show是元素一定会被渲染，只是基于CSS进行切换
区别：
v-if有更高的切换开销，不适合频繁的切换，因为一旦切换一定会改变页面的布局要消耗CPU，
而v-show是初始渲染开销较高，但是频繁切换时性能较好
19.不推荐同时使用v-if和v-for,v-for具有v-if更高的优先级，补充（在三级联动为了限制输出数据时运用了但是有运行时报错虽然可运行）
不要把v-if和v-for同时用在同一个元素上
有两种情况
[1]为了过滤列表中的项目，将列表user替换为一个计算数组(computed),让其返回过滤后的列表
[2]为了避免本应该被隐藏的列表，把v-if移动到容器元素上(ul、ol)
详解1：
<ul>
<li v-for=”user in users”
v-if=”user.isActive”:key=”user.id”>
{ {user.name}}
</li>
</ul>
会做的运算如下：
this.user.map(function(user){
if(user.isActive){
return user.name
}
})
因此当我们只渲染出一小部分用户的元素，也需要每次重新渲染遍历整个列表，不论活跃用户是否发生变化。
把需要更换为计算属性上进行遍历
computed:{
activeUsers:function(){
return this.users.filter(function(user){
return user.isActive
}) }}
<ul>
<li v-for=”user in activeUser” :key=”user.id”></li>
</ul>
过滤后的列表只会在users数组发生相关变化时才会被重新运算，过滤跟高效
解耦渲染层的逻辑，可维护性（对逻辑的更改和扩展）更强
详解2：
<ul>
<li v-for=”user in users”
v-if=”shouldShowUsers”
:key=”usesr.id”>
{ {user.name}}
</li>
</ul>
通过v-if移动到容器元素，就不会再对列表的每个用户检查shouldShowUsers,只检查一次，且不会在shouldShowUser为否的时候v-for
在遍历对象时，会按Object.keys()的结果遍历，但是不能保证它的结果在不同的JavaScript引擎下都一致。
为了给Vue一个提示，以便它能跟踪每个节点的身份，从而重用和重新排序现有元素，需要给每一项提供一个唯一的key
<div v-for=”item in items” v-bind:key=”item.id”></div>
意思就是使用v-for时尽可能也关联key
且不要使用对象或数组之类的非基本类型值作为v-for的key,请用字符串或数值类型的值
数组更新检测
变更方法：
push(),pop(),shift()删除,unshift()添加,splice(),sort(),reverse()
替换数组,filter()、concat()、slice(),不会变更原始数组，而总是返回一个新数组
由于Javascript的限制，Vue不能检测数组和对象的变化。
显示过滤/排序后的结果，可以嵌套使用v-fot循环
<ul v-for=”set in sets”>
<li v-for=”n in even(set)”>{ {n}}</li>
</ul>
data:{
sets:[[1,2,3,4,5],[6,7,8,9,10]]
},
methods:{
even:function(numbers){
return numbers.filter(function(number){
return number%2===0
}) }}
<li is=”todo-item”></li>
DOM模板，为什么要使用is，因为在ul元素中li元素会被看作有效内容作为代替的模板名字
在内联语句处理器中访问原始的DOM事件，使用$event传入方法
<button v-on:click=”warn('Form cannot be submitted yet.', $event)”></button>
methods:{
warn:function(message.event)
{
if(event){
event.preventDefault()
//在事件处理程序中调用event.preventDefault()或event.stopPropagation(),为了值处理数据逻辑，而不是去处理DOM事件细节
}
alert(message)
}
}
所以使用事件修饰符、
.stop .prevent .capture .self .once .passive 2.1.4新增.once只能点击一次（自定义组件事件也可以，其他都是必须是原生DOM）
2.3.0新增.passive 滚动事件的默认行为（滚动行为）
.passive能够提升移动端的性能子面意思是消极/被动