Vue.observable()

官方文档 Vue.observable()

vue2.6发布的一个新的api，可以处理简单的跨组件共享数据状态的问题，可以说是个精简版的vuex

示例

// /store/store.js
import Vue from 'vue'export const store = Vue.observable({ count: 0 })
export const mutations = {setCount (count) {store.count = count}
}

使用

<template><div><label for="bookNum">数 量</label><button @click="setCount(count+1)">+</button><span>{{count}}</span><button @click="setCount(count-1)">-</button></div>
</template><script>
import { store, mutations } from '../store/store' // Vue2.6新增API Observableexport default {name: 'Add',computed: {count () {return store.count}},methods: {setCount: mutations.setCount}
}
</script>

Vue.observable()相关推荐

[vue] Vue.observable你有了解过吗？说说看
[vue] Vue.observable你有了解过吗?说说看让一个对象可响应.Vue 内部会用它来处理 data 函数返回的对象.返回的对象可以直接用于渲染函数和计算属性内,并且会在发生改变时触发相 ...
Vue.Observable
定义让一个对象可响应,vue内部会用它来处理data函数返回的对象返回的对象可以直接用于渲染函数和计算属性内,并且会在发生变更时触发相应的更新.也可以作为最小化的跨组件状态存储器 observab ...
Vue的observable用法
下面是vue官网的介绍在多个子组件项目中使用这个非常好用.子组件数据传递,我们可能先想到先把子组件数据传到父组件,再由父组件传给另一个子组件,这样使很麻烦的. 现在我们建立一个js文件,让两个子组件 ...
如何优雅的在 vue 中使用非响应式对象_一篇文章上手Vue3中新增的API
1. 初始化项目 // ① npm i -g @vue/cli // ② vue create my-project // ③ npm install @vue/composition-api -S/ ...
「从源码中学习」面试官都不知道的Vue题目答案
前言当回答面试官问及的Vue问题,我们除了照本宣科的回答外,其实还可以根据少量的源码来秀一把,来体现出你对Vue的深度了解. 本文会陆续更新,此次涉及以下问题: "new Vue()做了什 ...
Vue 面试题 (全)
vue用的什么web模板引擎? jade模板,后来由于商标原因改成了pug v-model的原理? 数据双向绑定的指令,同步控件输入值到data属性更新data绑定属性,更新控件的值. view层和 ...
Web前端人员如何面试？常见vue面试题有哪些？
Web前端人员如何面试?常见vue面试题有哪些?vue是一套用于构建用户界面的渐进式JavaScript框架,也是初创项目的首选前端框架.很多企业在招聘前端工程师时都会考察其对vue的了解,接下来小编 ...
Vue面试题汇总目录
[Vue] [vue] vue组件里的定时器要怎么销毁? [vue] <template></template>有什么用? [vue] 你有使用过JSX吗?说说你对JSX的理解 ...
vue devtools面板没有显示_vue 基础入门（四）
vue 基础入门(四) 1.全局配置 Vue.config 是一个对象,包含 Vue 的全局配置.可以在启动应用之前修改下列 property: 1.1 silent 类型:boolean 默认值:f ...

Vue.observable()

Vue.observable()相关推荐

最新文章

热门文章