vue 实例

Posted 2020-11-23 zongzizi

 1  // 实例
 2     new Vue({
 3         //挂载点  vue启动作用的一个范围
 4         el:"#app",
 5         //当前vue所需要的一些属性  当前组件所需要的一些状态
 6         data:{
 7             message:1918
 8         },
 9         methods:{
10             
11         },
12         computed:{
13             
14         },
15         watch:{
16 　　　　}
17     })        

vue 当中的methods和computed，watch之间的联系与区别？

三者之间的共同点：

　　methods,watch和computed都是以函数为基础的

三者之间的不同点：

　　1. computed与watch都是以Vue的依赖为基础，当所依赖的数据发生变化的时候会触发相关的函数去实现数据的变动

　　2. methods里面是用来定义函数的，需要手动才能执行，不像computed与watch "自动执行"函数

　　3. 

　　computed:

    　　　　computed是一个计算属性，computed所依赖的属性发生变化时，计算属性才会重新计算,并进行缓存。

　　　　　当其他数据发生改变的时候computed属性不会重新计算。从而提升性能

　　watch:

　　　　　　watch类似与事件监听+事件机制

　　　　　　watch的方法默认是不会执行的，只有依赖的属性发生变化才会执行。

　　　　　　watch默认第一次是不会执行的，通过声明 immediate 选项为 true，可以立即执行一次 handler

　　　　　　watch 用在监听数据变化，给后台发数据请求

　　　　　　watch中的handler默认只能监听属性引用的变化，但内部属性是监听不到的，设置deep为true可以进行深度监听，但是性能开销也会变大

　　　　　　watch无法监听数组值(特殊情况下)的变化

   

　　watch与computed使用的场景

　　　　　　1、watch:一个数据影响多个数据

           　　　　　　例如:网络请求 模糊查询 浏览器自适应 监控路由对象

　　　　　　2、computed:一个数据受多个数据的影响

           　　　　　　例如:商品购物车的结算  过滤某些商品数据

 　　

Vue 实例身上的一些方法

    vm.$mount

    vm.$forceUpdate

    vm.$destroy

    vm.$nextTick

    vm.$on

    vm.$emit

    vm.$off

    vm.$once