Vue.observable使用教程

让一个对象可响应, vue内部会用它来处理data函数返回的对象

 返回的对象可以直接用于渲染函数和计算属性内, 并且会在发生变更时触发相应的更新, 也可以作为最小的跨组件状态存储器

 observable()方法用于设置监控属性, 这样可以监控viewModule中属性的变化, 从而就可以动态的改变某个元素的值, 监控属性则通过返回一个函数给viewModule对象中的属性, 从而来监控该属性,

 返回的对象可以直接用来渲染函数methods和计算属性computed内, 并且会在发生改变时触发相应的更新

 使用:在非父子 组件通信时, 可以使用通常的bus或vuex, 但是实现的功能不太复杂,而使用上面两个又有点繁琐,这时observable就是一个很好的选择

使用方法

1. 新建一个js文件,命名为 use-observable-fun.js
 

import Vue from 'vue';

export function useObserVableFun() {
  const state = Vue.observable({
    name: '张三',
  });

  function changeName(name) {
    state.name = name;
  }

  return {
    state, changeName,
  };
}

2.使用

在vue文件中直接使用即可

<template>
  <div>
    useObserVableData: {{ useObserVableData }}
    <button @click="useObserVableData.changeName('100')">
      changeName
    </button>
  </div>
</template>


<script>
import { useObserVableFun } from '@mixins/use-observable-fun';


export default {


  data() {
    return {
      useObserVableData: useObserVableFun(),
    };
  },
};
</script>

 

 效果实现!!!撒花