Vue实例的4个常用选项

173 阅读2分钟

1.过滤器 filters:

在不改变的data的情况下输出前端页面需要的格式数据。例如将小数过滤为整数等。filters是一个对象,里边定义一个function方法,function传入一个参数,function的作用是对数据进行相关处理。

image.png

image.png

2. 计算属性 computed:

当数据需要经过处理计算后才能得到结果的,我们可以用这个属性。例如求和等。computed是一个对象,里边定义一个function方法,function传入一个参数,function的作用是对数据进行相关处理计算等。 计算属性 computed 用法更简洁。

image.png

image.png

3.方法 methods:

在 methods 中,我们可以定义一些方法供组件使用。例如给定一个数据num,实现点击按钮数据num+1,可以定义一个puls()方法在methods中,然后将puls()绑定在按钮的点击事件上;

image.png

image.png

4.观察 watch:

watch是Vue提供的用于检测指定的数据发生改变的api,类似于事件监听。可以用methods中的例子来监听数字num。

image.png

image.png

补充

computed 属性与 watch 的区别

当需要数据在异步变化或者开销较大时,执行更新,使用 watch 会更好一些;而 computed 不能 进行异步操作;

computed 可以用缓存中拿数据,而 watch 是每次都要运行函数计算,不管变量的值是否发生变 化,而 computed 在值没有发生变化时,可以直接读取上次的值

computed 属性与 methods 的区别

在模板文件中,computed 属性只需要写{{reverseMessage}},而 methods 需要写成 {{reverseMessage()}},最明显的区别就是 methods 是方法,需要执行;

computed 属性只有在依赖的 data 放生变化时,才会重新执行,否则会使用缓存中的值,而 methods 是每次进入页面都要执行的,有些需要每次进入页面都执行的方法,需要使用 methods,而 computed 属性比较节约。

总结:

1.调用方法不同:computed 调用时不需要加(),而 methods 方法调用时需要加括号(),起名字

2.驻留内存的方式不同 Computed 具有缓存功能,相关的属性会一直驻留内存,可以多次进入页面调用而不需要重新 加载 Methods 需要每次进入[刷新]页面都需要重新加载 数据量大,需要缓存的时候用 computed ;每次确实需要重新加载,不需要缓存时 用 methods 。

  1. watch 的依赖则是单个的,它每次只可以对一个变量[mustache]进行监控,一般用在控制台对 变量进行监控