精准传达 • 有效沟通
从品牌网站建设到网络营销策划，从策略到执行的一站式服务
Vue中容易被忽视的知识点有哪些-创新互联
小编给大家分享一下Vue中容易被忽视的知识点有哪些，相信大部分人都还不怎么了解，因此分享这篇文章给大家参考一下，希望大家阅读完这篇文章后大有收获，下面让我们一起去了解一下吧！
站在用户的角度思考问题，与客户深入沟通，找到溆浦网站设计与溆浦网站推广的解决方案，凭借多年的经验，让设计与互联网技术结合，创造个性化、用户体验好的作品，建站类型包括：
成都网站建设、网站制作、企业官网、英文网站、手机端网站、网站推广、国际域名空间、
雅安服务器托管、企业邮箱。业务覆盖溆浦地区。
Vue的优点
Vue具体轻量级框架、简单易学、双向数据绑定、组件化、数据和结构的分离、虚拟DOM、运行速度快等优势，Vue中页面使用的是局部刷新，不用每次跳转页面都要请求所有数据和dom，可以大大提升访问速度和用户体验。
容易忽视的点
箭头函数的使用
ES6的普及使得箭头函数的使用更加频繁，但是在Vue中不要在选项属性或者回调上使用箭头函数，举个例子：
new Vue({
el: '#app',
data: {
show: true
},
created: () => {
console.log(this.show)
},
})将created钩子写成箭头函数，这里的this将不再指向Vue对象，在浏览器中将会指向window对象，这是因为箭头函数并没有this，this会作为变量一直向上级词法作用域查找，直到找到为止
指令动态参数
Vue从2.6.0开始，可以用方括号括起来的JavaScript表达式作为一个指令参数，举个例子：
change
new Vue({
el: '#app',
data() {
return {
event: 'input'
}
},
methods: {
doSomething () {
console.log('sss')
}
},
})这里将input的事件监听设置为一个动态的参数event，默认是监听点击事件，当点击change的时候，改为监听focus事件，动态参数预期会求出一个字符串，异常情况下值为null，null值可以用于移除绑定，任何其他非字符串类型的值都会触发一个警告
template中使用方法
methods中提供的方法大多数时候都是用来给其他方法调用的，但是它其实也可以像computed计算属性一样直接写在模版里，举个例子：
{{reversedMessage('hello')}}
var app = new Vue({
el: '#app',
methods: {
reversedMessage: function (message) {
return message.split('').reverse().join('')
}
},
})有了computed计算属性，为什么还要用methods呢？计算属性是基于响应式依赖进行缓存的，只在相关依赖发生改变时才会重新求值，而methods每次调用都会重新计算，调用methods时可以传参，进行指定计算，但是computed不行，这在遍历数组时十分有用
用key管理可复用元素
Vue会尽可能高效地渲染元素，通常会复用已有元素而不是从头开始渲染。这么做会使 Vue变得非常快，举个例子：
change
var app = new Vue({
el: '#app',
data() {
return {
loginType: 'username'
}
},
methods: {
change () {
this.loginType = this.loginType === 'username' ? 'email' : 'username'
}
}
})上面代码中切换loginType将不会清除用户已经输入的内容，因为两个模版使用了相同的元素，如果不想复用也很简单，只需要添加一个具有唯一值的key属性即可：
change
现在切换，每次都会重新渲染，但是label元素还是会被复用，因为它没有加唯一key值
v-if与v-for一起使用
Vue的风格指南不推荐同时使用v-if与v-for，当项目中的eslint继承了@vue/standard时，同时使用就会编译报错，但是可以通过在模版上加进行忽略，同时当它们处于同一节点，v-for的优先级比v-if更高，这意味着v-if 将分别重复运行于每个v-for循环中
对象变更检测
在Vue中对于已经创建的实例，不允许动态添加根级别的响应式属性，但是我们知道可以通过Vue.set(object, propertyName, value)方法向嵌套对象添加响应式属性，那如果需要为已有对象赋值多个新属性呢？举个例子：
{{user.name}}-{{user.age}}-{{user.sex}}
var app = new Vue({
el: '#app',
data() {
return {
user: {
name: 'xxx'
}
}
},
created() {
this.user = Object.assign({}, this.user, {
age: 18,
sex: 'name'
})
},
})可以用Object.assign为这个对象重新赋值，这样就能添加多个新的响应式属性
内联方法访问原始DOM事件
有时在模版中调用方法时，我们需要向方法中传参数，但是同时又要传递原始的DOM事件，怎么处理呢？举个例子：
share
var app = new Vue({
el: '#app',
data() {
return {
user: {
name: 'xxx'
}
}
},
methods: {
share (info, event) {
console.log(info, event)
}
},
})如例子所示，可以用特殊变量$event把它传入方法
once、passive事件修饰符
Vue中提供了多个事件修饰符， once、passive是后面新增的两个，once用于限定事件只触发一次，passive用于修饰的事件发生后立即触发，用于提升移动端性能
表单输入修饰符
.lazy
在默认情况下，v-model在每次input事件触发后将输入框的值与数据进行同步，可以添加lazy修饰符，从而转变为使用change事件进行同步，举个例子：
.number
如果想自动将用户的输入值转为数值类型，可以给v-model添加number修饰符，这通常很有用，因为即使在type="number"时，HTML输入元素的值也总会返回字符串。如果这个值无法被 parseFloat()解析，则会返回原始的值，举个例子：
.trim
如果要自动过滤用户输入的首尾空白字符，可以给v-model添加trim修饰符，举个例子：
子组件替换/合并已有的特性
在Vue中对于绝大多数特性来说，从外部提供给组件的值会替换掉组件内部设置好的值。所以如果传入type="text"就会替换掉 type="date"并把它破坏！庆幸的是，class和 style特性会稍微智能一些，即两边的值会被合并起来，从而得到最终的值，举个例子：
Vue.component('base-input', {
template: ``
})
new Vue({
el: '#app',
})在上例中input的type值为date，class为deafault，在使用子组件时，向子组件中传入type="text" class="out"，此时input的type值会被替换为text，class值会被合并为"default out"，那么如果想要禁用属性继承怎么办呢？可以在组件的选项中设置inheritAttrs:false，举个例子：
Vue.component('base-input', {
inheritAttrs: false,
template: ``
})但是inheritAttrs:false选项不会影响style和class的绑定，因此style和class还是会合并
.sync修饰符
在有些情况下，可能需要对一个 prop进行“双向绑定”。不幸的是，真正的双向绑定会带来维护上的问题，因为子组件可以修改父组件，且在父组件和子组件都没有明显的改动来源，因此Vue提供了sync修饰符，举个例子：
{{title}}
Vue.component('text-document', {
props: ['title'],
template: `change`,
methods: {
change () {
this.$emit('update:title', 'change')
}
},
})
new Vue({
el: '#app',
data() {
return {
title: 'default'
}
}
})当调用this.$emit('update:title', 'change')，父组件中的title就会改变
以上是“Vue中容易被忽视的知识点有哪些”这篇文章的所有内容，感谢各位的阅读！相信大家都有了一定的了解，希望分享的内容对大家有所帮助，如果还想学习更多知识，欢迎关注创新互联成都网站设计公司行业资讯频道！
另外有需要云服务器可以了解下创新互联scvps.cn，海内外云服务器15元起步，三天无理由+7*72小时售后在线，公司持有idc许可证，提供“云服务器、裸金属服务器、高防服务器、香港服务器、美国服务器、虚拟主机、免备案服务器”等云主机租用服务以及企业上云的综合解决方案，具有“安全稳定、简单易用、服务可用性高、性价比高”等特点与优势，专为企业上云打造定制，能够满足用户丰富、多元化的应用场景需求。
标题名称：Vue中容易被忽视的知识点有哪些-创新互联
标题路径：http://cdkjz.cn/article/dpjgde.html
