• 24小时服务热线:400-088-1128

当前位置 南顺网络>> 知识拓展

vue文档里你没捡起来的宝贝

vue的数据响应失效了

你知道什么情况下,vue的数据响应会是失效吗? 官方举了个例子:

var vm = new Vue({
  data: {
    items: ['a', 'b', 'c']
  }
})
vm.items[1] = 'x' // 不是响应性的
vm.items.length = 2 // 不是响应性的
在日常的业务的处理中,尤其是数组的for循环渲染,当你使用完v-for之后,动态的通过操作index指定数组的值,不是响应的。 我们使用实际业务代码举个例子:
我直接执行了respondList (),但是可以看到this.list[0] = 16这句也跟着一起响应了,这就是为什么我们日常项目中没有出现这个问题的原因。
因为在日常项目中很少会有单独写一个方法去改list[index],通常会伴随着其他的对数组或者数组中对象的一些操作,而这些操作会触发Vue的响应,Vue响应不是响应我们的代码过程,他响应的是结果,而我们的代码过程只是意味着是否会触发Vue对代码结果的响应。

简单说,执行第一个方法,里面的2行代码将list变为了空数组,但是这2行代码都不会触发Vue去响应,顾,页面不变。
执行第二个方法,this.list[2].money = 0除了将money变为了0还触发了Vue的响应机制,也就是方法执行完之后Vue会对list进行更新,所以第2行this.list[0] = 16将整个list修改完之后,方法结束,Vue更新list
所以我们要规避在Vue直接去单独对数组的[index]和length去赋值,注意!是单独。

vue的数据响应又又失效了?

你没看错,vue的数据响应又要上演失效了,这次的失效可能你平常项目中写过很多,但是 你还是没注意过! 该知识点来源于vue文档的列表渲染里面的一小段提示代码:
var vm = new Vue({
  data: {
    a: 1
  }
})
// `vm.a` 现在是响应式的
    vm.b = 2
// `vm.b` 不是响应式的
阔怕,你从来没想过你在项目中obj.a=1会不生效,这其中文档中有2句话很重要:
还是由于 JavaScript 的限制,Vue 不能检测对象属性的添加或删除。 对于已经创建的实例,Vue 不能动态添加根级别的响应式属性。
相信我的加粗已经让你意识到了问题所在,至于日常中为什么没有感觉到失效是和上个例子一样的,当然官方为这种单独操作对象属性方法.
Vue.set(object, key, value)

不止在{{}}中可以使用函数

我要表达的意思是不止在双括号中可以使用函数,v-for也可以。 当然如果有人不知道双括号可以使用函数,我们先来演示一遍:

好的,接下来,文档告诉我们一个技巧,直接看官网示例:
  • {{ n }}
  • data: {
      numbers: [ 1, 2, 3, 4, 5 ]
    },
    computed: {
      evenNumbers: function () {
        return this.numbers.filter(function (number) {
          return number % 2 === 0
        })
      }
    }
    可以直接用一个函数来代替v-for中的list,这样可以结合计算属性避免我们在每次获取数据等业务场景下重新单独处理list
    函数中直接调用当前元素的原生事件
    首先说一下这个技巧适用于:

    你要为某个元素绑定一个事件
    你的事件里可能需要操作业务的同时,根据业务操作浏览器原生事件
    绑定事件时可以用特殊变量 $event 把它传入方法:

      Submit
    // ...
    methods: {
      warn: function (message, event) {
        // 现在我们可以访问原生事件对象
        if (event) event.preventDefault()
        alert(message)
      }
    }

    该技巧适应场景有限,但是至少你要记住,vue可以直接在实践中绑定event,去操作原生事件,因为总有一天你会发现有些p需求需要你去实现……
    Vue的修饰符很多你知道吗
    有v-once也有.once
    大家知道vue推荐对低开销的静态内容使用v-once渲染,但是如果你仔细看过文档你应该知道v-once,首先v-once的原理其实是keep-alive,它会缓存v-once的组件,但是希望你再阅读一次官方这句提示:

    再说一次,试着不要过度使用这个模式。当你需要渲染大量静态内容时,极少数的情况下它会给你带来便利,除非你非常留意渲染变慢了,不然它完全是没有必要的——再加上它在后期会带来很多困惑。例如,设想另一个开发者并不熟悉v-once 或漏看了它在模板中,他们可能会花很多个小时去找出模板为什么无法正确更新。

    是的,除非你这个组件渲染的开销已经严重到你觉得他明显的慢,否则不要使用。

    然后我们来说事件的.once
    你认为的type="number"
    大家在表单中如果要是用数字类型的input的时候通常我们会使用type=number,但是也许没有人注意到input真正返回是什么,比如:

    首先,在渲染上,至少结果都是正确的,console的结果也是没问题的,但是console调试的时候,蓝色数字和白色数字有什么区别,也许很多人都没注意过这个问题,回看看文档就可以让你理解我刚才提出的问题,文档原文:
    如果想自动将用户的输入值转为数值类型,可以给 v-model 添加 number 修饰符:
    这通常很有用,因为即使在 type="number" 时,HTML 输入元素的值也总会返回字符串。如果这个值无法被 parseFloat() 解析,则会返回原始的值。 是滴,我觉得这对于用ts的人极其和谐。
    如果你看到了上面的.number修饰符,那你一定可以在文档中接着看到.trim修饰符:
    如果要自动过滤用户输入的首尾空白字符,可以给 v-model 添加 trim 修饰符:

    链接:https://juejin.im/post/5d4bb71e51882551d172e557
    来源:掘金