vue Vue.observable返回一个响应对象

逃离我推掉我的手 2021-07-24 16:31 472阅读 0赞

Vue.observable
    	让一个对象可响应,Vue内部会用它来处理data函数返回的对象。
    	也可以作为最小化的跨组件状态存储器
    	
    使用:
    	let ob=Vue.observable(object)	返回的对象可以直接用于渲染函数和计算属性内,会在发生变更时触发相应的更新
    
    和vue3.0区别:
    	在Vue 2.x中,被传入的对象会直接被Vue.observable变更,所以如这里展示的,它和被返回的对象是同一个对象。
    	在Vue 3.x中,则会返回一个可响应的代理,而对源对象直接进行变更仍然是不可响应的。

代码示例:

<template>
    <div id="list-complete-demo" class="demo">
      路由内容
    
      <div>
        <p @click="f">哈哈哈</p>
        <span>{ { g}}</span>
      </div>
    </div>
    </template>
    
    <script>
    
    import Vue from 'vue';
    let ob=Vue.observable({ count:0});
    
    export default { 
      name: 'HelloWorld',
      computed:{ 
        g(){ 
          return ob.count;
        }
      },
      methods:{ 
        f(){ 
          
          ob.count++;
    
        }
      }
    }

渲染函数:

const state = Vue.observable({  count: 0 })
    
    const Demo = { 
      render(h) { 
        return h('button', { 
          on: {  click: () => {  state.count++ }}
        }, `count is: ${ state.count}`)
      }
    }

发表评论取消回复

表情：

评论列表（有 0 条评论，472人围观）

还没有评论，来说两句吧...

相关阅读

相关 Vue响应式原理和本质 | 实现一个完善的响应式系统

文章目录前言响应式响应式的本质基本实现和工作原理完善的响应式前言 > 本篇文章代码思路来自Vue3

我不是女神ヾ/ 2024年02月20日 09:00/ 0 赞/ 54 阅读

相关 Vue响应式原理和本质 | 实现一个完善的响应式系统

文章目录前言响应式响应式的本质基本实现和工作原理完善的响应式前言 > 本篇文章代码思路来自Vue3

╰半橙微兮°/ 2024年02月20日 04:12/ 0 赞/ 42 阅读

相关手写一个Vue.js响应式框架

准备工作数据驱动响应式的核心原理发布订阅和观察者模式 github源码：[https://github.com/HZhen/Vue-fram

电玩女神/ 2023年03月01日 10:05/ 0 赞/ 3 阅读

相关 php 返回一个空对象,PHP如何定义一个空对象

使用新数组我这样做： $aVal = array(); $aVal\[key1\]\[var1\] = "something"; $aVal\[key1\]\[var2\

青旅半醒/ 2022年11月12日 08:30/ 0 赞/ 543 阅读

相关响应对象Response

问题：视图函数的 return 和普通函数的 return 有什么区别。视图函数会返回状态码（status）、content-type（放置在http请求的headers

￡神魔★判官ぃ/ 2022年09月11日 06:23/ 0 赞/ 201 阅读

相关 response对象（响应对象）

1.response简介： > 1）想要获取客户端的内容，使用request对象。 > > > 2）对客户端做出响应，使用response对象。 > >

迈不过友情╰/ 2022年08月20日 04:12/ 0 赞/ 322 阅读

相关 map返回另一个对象

直接上图： 1、先定义一个对象 ![Center][] 2、再map一下它 ![Center 1][] 3、给map后的对象定义另一个名称，把a

超、凢脫俗/ 2022年06月06日 00:40/ 0 赞/ 353 阅读

相关 webservice +axis2 接收一个对象参数并返回一个对象

本人微信 zf363133213 欢迎各位添加好友，共同探讨问题本人公众号：java进阶 ![2019053120345735.jpg][] 做为服务端发布可以参考：

我会带着你远行/ 2022年05月28日 03:19/ 0 赞/ 211 阅读

相关 vue监听对象某一个属性

watch: { uploadObj: { //监听对象 deep: true, handler: fu

系统管理员/ 2021年07月25日 00:02/ 0 赞/ 464 阅读

相关 vue Vue.observable返回一个响应对象

Vue.observable 让一个对象可响应,Vue内部会用它来处理data函数返回的对象。也可以作为最小化的跨组件状态存储器

逃离我推掉我的手/ 2021年07月24日 16:31/ 0 赞/ 473 阅读