Vue中计算属性、侦听、过滤、自定义指令、ref的操作

1.计算属性

    
    
    {{get}}

     我们可以将同一函数定义为一个方法而不是一个计算属性。两种方式的最终结果确实是完全相同的。然而，不同的是计算属性是基于它们的依赖进行缓存的。只在相关依赖发生改变时它们才会重新求值；多次调用，计算属性会立即返回之前的计算结果，而不必再次执行函数。

2.使用侦听器

        

            
            {{msg}}
        
    
    

    我们发现，与计算属性相比，侦听器并没有优势；也不见得好用，直观上反而比计算属性的使用更繁琐；虽然计算属性在大多数情况下更合适，但有时也需要一个自定义的侦听器。这就是为什么 Vue 通过 watch 选项提供了一个更通用的方法，来响应数据的变化。当需要在数据变化时执行异步或开销较大的操作时，这个方式是最有用的。

3.过滤器的使用

局部过滤器：

    

        
        {{msg|myf|nu}}
    
 

全局过滤器：

    

        
        {{msg|myf|nu}}
    

过滤器要被添加到操作值得后面，使用 管道符 | 分割；vue会自动将操作值，以实参的形式传入过滤器的方法中；

4.自定义指令

前面我们学过 v-on 、v-model、v-show 等指令，在操作 dom 时使用了 ref 属性，其实之前学过的指令也是操作dom 的一种方式，但有时，这些指令并不能满足我们的需求，因此 vue 允许我们自定义指令来操作 dom

    

        
123131321
    

5.ref的使用

在学习 jq 时，我们首要任务就是学习选择的使用，因为选择可以极其方便帮助我们获取节点查找dom，因为我们要通过dom展示处理数据。而在Vue中，我们的编程理念发生了变化，变为了数据驱动dom；但有时我们因为某些情况不得不脱离数据操作dom,因此vue为我们提供了 ref 属性获取dom节点；

    

        
        
211113131
    

   

但是在项目开发中，尽可能不要使用ref，因为从一定程度上，ref 违背的mvvm设计原则；

转载于:https://www.cnblogs.com/shineguang/p/10891235.html