Vue使用技巧有哪些

小编给大家分享一下Vue使用技巧有哪些，相信大部分人都还不怎么了解，因此分享这篇文章给大家参考一下，希望大家阅读完这篇文章后大有收获，下面让我们一起去了解一下吧！数据不响应，可能是用法有问题前几天有朋友给我发了一段代码，然后说Vue有bug，他明明写的没问题，为啥数据就不响应呢，一定是Vue的bug？我感觉他比尤雨溪要牛逼，高攀不起，就没有理他了。但是确实有时候我们在开发时候会遇到数据不响应的情况，那怎么办呢？比如下面这段代码:在上面的代码中，我们希望给用户信息里面添加公众号属性，但是通过this.userInfo.officialAccount = ‘前端有的玩’ 添加之后，并没有生效，这是为什么呢？这是因为在Vue内部，数据响应是通过使用Object.definePrototype监听对象的每一个键的getter,setter方法来实现的，但通过这种方法只能监听到已有属性，新增的属性是无法监听到的，但我就是想监听，小编你说咋办吧。下面小编提供了四种方式，如果有更多方式，欢迎下方评论区告诉我。1. 将本来要新增的属性提前在data中定义好比如上面的公众号，我可以提前在userInfo里面定义好，这样就不是新增属性了，就像下面这样2. 直接替换掉userInfo虽然无法给userInfo里面添加新的属性，但是因为userInfo已经定义好了，所以我直接修改userInfo的值不就可以了么，所以也可以像下面这样写3. 使用Vue.set其实上面两种方法都有点取巧的嫌疑，其实对于新增属性，Vue官方专门提供了一个新的方法Vue.set用来解决新增属性无法触发数据响应。Vue.set 方法定义上面的代码使用Vue.set可以修改为但是每次要用到set方法的时候，还要把Vue引入进来，好麻烦，所以为了简便起见，Vue又将set方法挂载到了Vue的原型链上了，即Vue.prototype.$set = Vue.set,所以在Vue组件免费云主机、域名内部可以直接使用this.$set代替Vue.set小编发现有许多同学不知道什么时候应该用Vue.set，其实只有当你要赋值的属性还没有定义的时候需要使用Vue,set，其他时候一般不会需要使用。4. 使用$forceUpdate我觉得$forceUpdate的存在，让许多前端开发者不会再去注意数据双向绑定的原理，因为不论什么时候，反正我修改了data之后，调用一下$forceUpdate就会让Vue组件重新渲染，bug是不会存在的。但是实际上这个方法并不建议使用，因为它会引起许多不必要的性能消耗。针对数组的特定方式其实不仅仅是对象，数组也存在数据修改之后不响应的情况，比如下面这段代码上面的代码希望将张三的名字修改为王五，实际上这个修改并不能生效，这是因为Vue不能检测到以下变动的数组:鸿蒙官方战略合作共建——HarmonyOS技术社区当你利用索引直接设置一个项时，例如: this.list[index] = newValue修改数组的length属性,例如: this.list.length = 0所以在上例中通过this.list[0] = ‘王五’ 是无法触发数据响应的，那应该怎么办呢？像上面提到的Vue.set和$forceUpdate都可以解决这个问题，比如Vue.set可以这样写除了那些方法之外，Vue还针对数组提供了变异方法在操作数组的时候，我们一般会用到数据提供的许多方法，比如push,pop,splice等等，在Vue中调用数组上面提供的这些方法修改数组的值是可以触发数据响应的，比如上面的代码改为以下代码即可触发数据响应实际上，如果Vue仅仅依赖getter与setter，是无法做到在数组调用push,pop等方法时候触发数据响应的，因此Vue实际上是通过劫持这些方法，对这些方法进行包装变异来实现的。Vue对数组的以下方法进行的包装变异:pushpopshiftunshiftsplicesortreverse所以在操作数组的时候，调用上面这些方法是可以保证数据可以正常响应，下面是Vue源码中包装数组方法的代码:文本格式化，filter更简单使用filter 简化逻辑我想把时间戳显示成yyyy-MM-DD HH:mm:ss的格式怎么办？是需要在代码中先将日期格式化之后，再渲染到模板吗？就像下面这样像上面的写法，针对每一个日期字段都需要调用format，然后通过计算属性进行转换？这时候可以考虑使用Vue提供的filter去简化通过上面的修改是不是就简单多了注册全局filter有些过滤器使用的很频繁，比如上面提到的日期过滤器，在很多地方都要使用，这时候如果在每一个要用到的组件里面都去定义一遍，就显得有些多余了，这时候就可以考虑Vue.filter注册全局过滤器对于全局过滤器，一般建议在项目里面添加filters目录，然后在filters目录里面添加然后将filters里面的文件引入到main.js里面，这时候就可以在组件里面直接用了，比如将前面的代码可以修改为是不是更简单了开发了插件库，来安装一下在使用一些UI框架的时候，经常需要使用Vue.use来安装， 比如使用element-ui时候，经常会这样写:使用了Vue.use之后，element-ui就可以直接在组件里面使用了，好神奇哦（呸，娘炮）。接下来我们实现一个简化版的element来看如何去安装。了解Vue.use的用法Vue.use是一个全局的方法，它需要在你调用 new Vue() 启动应用之前完成，Vue.use的参数如下模拟element-ui的安装逻辑想一下，使用Vue.use(ElementUI,{size: ‘small’}) 之后我们可以用到哪些element-ui提供的东西鸿蒙官方战略合作共建——HarmonyOS技术社区可以直接在组件里面用element-ui的组件，不需要再import可以直接使用v-loading指令通过this.$loading在组件里面显示loading其他…通过上面的代码，已经实现了一个丐版的element-ui插件，这时候就可以在main.js里面通过Vue.use进行插件安装了。大家可能会有疑问，为什么我要用这种写法，不用这种写法我照样可以实现功能啊。小编认为这种写法有两个优势鸿蒙官方战略合作共建——HarmonyOS技术社区标准化，通过提供一种统一的开发模式，无论对插件开发者还是使用者来说，都有一个规范去遵循。插件缓存，Vue.use 在安装插件的时候，会对插件进行缓存，即一个插件如果安装多次，实际上只会在第一次安装时生效。插件的应用场景鸿蒙官方战略合作共建——HarmonyOS技术社区添加全局方法或者 property。添加全局资源：指令/过滤器/过渡等。通过全局混入来添加一些组件选项。添加 Vue 实例方法，通过把它们添加到 Vue.prototype 上实现。一个库，提供自己的 API，同时提供上面提到的一个或多个功能。如element-ui提高Vue渲染性能，了解一下Object.freeze当一个 Vue 实例被创建时，它将 data 对象中的所有的 property 加入到 Vue 的响应式系统中。当这些 property 的值发生改变时，视图将会产生“响应”，即匹配更新为新的值。但是这个过程实际上是比较消耗性能的，所以对于一些有大量数据但只是展示的界面来说，并不需要将property加入到响应式系统中，这样可以提高渲染性能，怎么做呢，你需要了解一下Object.freeze。在Vue官网中，有这样一段话：这里唯一的例外是使用 Object.freeze()，这会阻止修改现有的 property，也意味着响应系统无法再_追踪_变化。这段话的意思是，如果我们的数据使用了Object.freeze，就可以让数据脱离响应式系统，那么该如何做呢?比如下面这个表格，因为只是渲染数据，这时候我们就可以通过Object.freeze来优化性能有的同学可能会有疑问，如果我这个表格的数据是滚动加载的，你这样写我不就没法再给tableData添加数据了吗？是，确实没办法去添加数据了，但还是有办法解决的，比如像下面这样以上是“Vue使用技巧有哪些”这篇文章的所有内容，感谢各位的阅读！相信大家都有了一定的了解，希望分享的内容对大家有所帮助，如果还想学习更多知识，欢迎关注云技术行业资讯频道！

相关推荐: jquery如何增加子元素

这篇“jquery如何增加子元素”文章的知识点大部分人都不太理解，所以小编给大家总结了以下内容，内容详细，步骤清晰，具有一定的借鉴价值，希望大家阅读完这篇文章能有所收获，下面我们一起来看看这篇“jquery如何增加子元素”文章吧。 增加子元素的方法：1、用“$…