精华内容
下载资源
问答
  • vue实现响应式原理即vue如何监听data的每个属性的变化★★★★重要指数:★★★★记住两点1、使用 Object.defineProprety实现响应式原理 2、 data属性代理到vm(即是Vue实例)上Object.defineProperty 是如何使用的?...

    vue实现响应式原理即vue如何监听data的每个属性的变化★★★★

    重要指数:★★★★

    记住两点

    1、使用 Object.defineProprety实现响应式原理 2、 data属性代理到vm(即是Vue实例)上

    Object.defineProperty 是如何使用的?

    Object.defineProperty() 方法会直接在一个对象上定义一个新属性,或者修改一个对象的现有属性, 并返回这个对象。因为 Object.defineProperty() 是ES6新增的一个方法,所有我们使用vue不支持IE低版本浏览器

     /*----------  defineProperty 基本使用  ------------*/
    let obj = {}
    let name = 'qdleader'

    Object.defineProperty(obj, 'name', {
    get: function () {
    console.log('get')
    return name
    },
    set: function (newValue) {
    console.log('set')
    name = newValue
    }

    })
    console.log(obj.name)
    obj.name = 'yyyang'
    // 输出
    // get
    // qdleader
    // set

    defineProperty这个原理就是拦截对象,给对象的属性增加 set 和 get方法,因为核心是 defineProperty所以还需要对数组的方法进行拦截

    对对象进行拦截
    function observer(target){
    // 如果不是对象数据类型直接返回即可
    if(typeof target !== 'object'){
    return target
    }
    // 重新定义key
    for(let key in target){
    defineReactive(target,key,target[key])
    }
    }
    function update(){
    console.log('update view')
    }
    function defineReactive(obj,key,value){
    observer(value); // 有可能对象类型是多层,递归劫持
    Object.defineProperty(obj,key,{
    get(){
    // 在get 方法中收集依赖
    return value
    },
    set(newVal){
    if(newVal !== value){
    observer(value);
    update(); // 在set方法中触发更新
    }
    }
    })
    }
    const obj = {name:'qdleader'}
    observer(obj);
    obj.name = 'new-name';
    输出:
    update view


    数组方法劫持
    const oldProtoMehtods = Array.prototype
    const proto = Object.create(oldProtoMehtods)
    function update(){
    console.log('update view')
    }
    function defineReactive(obj,key,value){
    observer(value) // 有可能对象类型是多层,递归劫持
    Object.defineProperty(obj,key,{
    get(){
    // 在get 方法中收集依赖
    return value
    },
    set(newVal){
    if(newVal !== value){
    observer(value)
    update() // 在set方法中触发更新
    }
    }
    })
    }
    ['push','pop','shift','unshift'].forEach(method=>{
    Object.defineProperty(proto, method,{
    get(){
    update()
    return oldProtoMehtods[method]
    }
    })
    })
    function observer(target){
    if(typeof target !== 'object'){
    return target
    }
    // 如果不是对象数据类型直接返回即可
    if(Array.isArray(target)){
    Object.setPrototypeOf(target, proto)
    // 给数组中的每一项进行observr
    for(let i = 0 ; i < target.length; i++){
    observer(target[i])
    }
    return
    }
    // 重新定义key
    for(let key in target){
    defineReactive(target, key, target[key])
    }
    }
    let obj = {hobby:[{name:'zhuanzhuan'}]}
    observer(obj)
    // 使用['push','pop','shift','unshift'] 方法,更改数组会触发视图更新
    obj.hobby.push('转转')
    // 更改数组中的对象也会触发视图更新
    obj.hobby[0].name = 'new-name'
    console.log(obj.hobby)
    输出:
    update view
    update view
    [ { name: [Getter/Setter] }, 'qdleader' ]

    Object.defineProperty缺点:

    无法监听数组的变化

    需要深度遍历,浪费内存

    模拟实现Vue响应式

    // 模拟实现Vue响应式
    let vm = {} // 我们把这个看做是Vue的一个实例
    // data看作是Vue实例的data属性
    let data = {
    price:100,
    name:'qdleader'
    }


    let key, value

    for (const key in data) {
    if (data.hasOwnProperty(key)) {
    (function(key){
    Object.defineProperty(vm,key,{ // 将data属性代理到vm上
    get:function(){
    console.log('get',data[key]) // 监听
    return data[key]
    },
    set:function(newValue){
    console.log('set',newValue) // 监听
    data[key] = newValue
    }
    })
    })(key)

    }
    }


    console.log(vm.name)

    福利来啦 跨越山海去拥抱你,你的付出不会被辜负,前端路一起加油。扫码回复资料可以领10g前端资料,也可回复加群,加入交流群。

    0b4d00a332256aa14a3fbe6c12977b30.png

    另有github每日更新精选面试题欢迎star
    https://github.com/qdleader/qdleader

    展开全文
  • 一,vuex 声明全局变量 import getters from './getters' import app from './modules/app' export default new Vuex.Store({ modules: { app, }, state: { analysisJSON: {}, // 事件分析的对象json }, ...

    项目背景

    因为一个页面的功能比较多,会拆分了很多组件,但是数据却要共用同步的情况

    一,vuex 声明全局变量

    import getters from './getters'
    import app from './modules/app'
    export default new Vuex.Store({
      modules: {
        app,
      },
      state: {
        analysisJSON: {}, // 事件分析的对象json
      },
      mutations: {
        setAnalysisJSON (state, analysisJSON) {
          state.analysisJSON = analysisJSON
        },
     },
     getters
    

    注意:如果是在别的的 vuex 模块中声明的(如引入的app中声明的中) 好像不会生效的,只有在export 中的 state声明才会生效,如果设置了不可以,可以考虑一下这个问题

    二,在getters 中声明方法

    const getters = {
      isMobile: state => state.app.isMobile,
      getAnalysisJSON: state => state.analysisJSON,
    
    export default getters
    

    三,在vue 组件中修改提交数据

    this.$store.commit('setAnalysisJSON', AnalysisJSON)
    

    四,在组件中监听这个数据的变化

    computed: {
        analysisEvent () {
          // computed是计算属性,state里面的demoValue改变之后,就会进行一次计算,并返回计算值到对应的参数中
          return this.$store.state.analysisJSON
        }
      },
      watch: {
        // 监听属性,在computed计算属性更改之后会触发参数值的改变,所以能够监听到
        analysisEvent (newValue, oldValue) {
          // console.log(`参数改变了:`, JSON.parse(this.$store.getters.getAnalysisJSON))
        }
      }
    
    展开全文
  • vue.js为例:主要是用到 storage_event 来实现创建方法在main中给 Vue.protorype 注册一个全局方法,然后创建一个 StorageEvent 方法,当我在执行sessionStorage.setItem(k, val) 的时候,初始化事件 并 ...

    8e2dc3839659d195a7208082e1c9a366.png

    以vue.js为例:

    主要是用到 storage_event 来实现

    创建方法

    在main中给 Vue.protorype 注册一个全局方法,然后创建一个 StorageEvent 方法,当我在执行sessionStorage.setItem(k, val) 的时候,初始化事件 并 dispatchEvent(派发)事件。

    *[^_^]: 派发目的是在设置数据后,通知window对象的

    在vue原型上(main.js)添加方法:

    4715cf958f993a5ceb7732c05267eac0.png

    调用

    在需要设置数据的组件中调用

    f46d3a1847839b8aa5f39361a6993cf4.png

    监听

    在需要监听的组件中监听,需要明确的是,需要写在mounted生命周期中

    8620f800b981c5db1827e133fce2702b.png

    实际效果

    实际效果是这样的:

    f86fa250efc3a81743cda58a018e56d5.png

    可以看到,在调用后我们能拿到有关更新的数据的所有值,然后就可以随心所欲了

    展开全文
  • Vue不能监听到的数据变化

    千次阅读 2018-07-03 10:55:42
    例如:vm.items[indexOfItem] = newValue当你修改数组的长度时,例如:vm.items.length = newLength还是由于 JavaScript 的限制,Vue 不能检测对象属性的添加或删除 解决方法使用 vm.$set 实例方法或者全局 ...
    1. 当你利用索引直接设置一个项时,例如:vm.items[indexOfItem] = newValue
    2. 当你修改数组的长度时,例如:vm.items.length = newLength
    3. 还是由于 JavaScript 的限制,Vue 不能检测对象属性的添加或删除


       解决方法

    使用 vm.$set 实例方法或者全局 Vue.set全局方法


    展开全文
  • 目录vue基础vue的下载简单使用常用指令v-text、v-html 把变量值作为innerText、innerHTMLv-show 控制元素的显示、隐藏v-if 条件判断v-for 遍历数组、对象v-bind、v-model 数据绑定v-on 事件绑定过滤器组件内...
  • vue.js为例:主要是用到 storage_event 来实现创建方法在main中给 Vue.protorype 注册一个全局方法,然后创建一个 StorageEvent 方法,当我在执行sessionStorage.setItem(k, val) 的时候,初始化事件 并 ...
  • vuex的理解 采用集中式存储管理模式。用来管理组件的状态,并以自定以规则去观测实时监听值得变化。 vuex安装引入 使用前需要下载vuex ...,再在vue实例全局引入store对象; import Vue from 'vue' imp...
  • Vue+TypeScript学习纪实

    2019-06-21 10:47:25
    1. 公司项目目前是vue-cli3.x版本,支持ts,以下是在项目开发过程中学到的注意要点 2. 起手式主要是参照vue+ts的起手式 3. 在使用的时候,@Component一定要写上,从'...5. vue需要监听data中的对象数据变化时,发...
  • vue 路由守卫

    2020-08-18 16:55:00
    在某些情况下,当路由跳转前或跳转后、进入、离开某一个路由前、后,需要做某些操作,就可以使用路由钩子来监听路由的变化 全局路由钩子 //全局的前置路由守卫,会在任意路由跳转前执行,next一定要记着执行,不然...
  • 双向绑定的实现依赖对编辑器内容变化监听,不同的监听方式,会有一些差异性,你可以自行选择,但建议不要修改,除非你知道自己在干吗。 <vue-ueditor-wrap mode="listener"></vue-ueditor-wrap> 可选...
  • vue状态管理、Vuex使用详解

    千次阅读 2019-03-02 14:09:47
    1.NPM安装 npm install vuex --save 2.配置vuex Vuex 实例对象属性 主要有下面5个核心属性 state :全局访问的state对象,存放要设置的初始状态名及值(必须要有) ... getters :实时监听state值的变化可对...
  • 对于刷新页面:监听页面是否刷新,如果页面刷新了,将state对象存入到sessionStorage/localStorage中。页面打开之后,判断sessionStorage/localStorage中是否存在state对象,如果存在,则说明页面是被刷新过的,将...
  • 前面章节介绍了响应式的原理,当监听的属性值发生变化,会触发其相关的订阅watcher对象更新。如果在模板中使用了该属性,则会触发render wacher的更新,最终实现dom的更新。dom更新的有两种实现方式,一种是"全量...
  • 那这个<code>observe监听的是<code>this.value</code>,好像有点不对劲?后来我才发现有一个地方忽略了。 <pre><code>javascript var data = this._data = dataFn ? dataFn() : {} </code></pre...
  • 让多个观察者对象同时监听某一个主题对象。这个主题对象在状态变化时,会通知所有的观察者对象,使他们能够自动更新自己。 比如举个例子:红绿灯和行人。红绿灯为被观察者,行人为观察者。当绿灯亮起时,人要通过了...
  • vuex的用法

    2019-10-24 10:55:12
    import Vue from 'vue'; import Vuex from 'vuex'; Vue.use(Vuex); const state={ //要设置的全局访问的state对象 showFooter: true, changableNum:0 ...const getters = { //实时监听state值的变化...
  • Vuex使用总结

    2021-01-07 12:13:20
    仓库 主仓库 // store/index.js import Vue from "vue"; import Vuex from "vuex"; // 引入子仓库 import home from './modules/home.js' ...Vue.use(Vuex);...const getters = { //实时监听state值的变化(最
  • Mobx与Redux区别

    2018-08-22 16:49:00
    Mobx的实现思想和Vue几乎一样,所以其优点跟Vue也差不多:通过监听数据(对象、数组)的属性变化,可以通过直接在数据上更改就能触发UI的渲染,从而做到MVVM、响应式、上手成本低、开发效率高,在数据管理上需要再...
  • 前言 vue构建的单页大型项目中,可能会用到Vuex 。Vuex 的状态存储是响应式的,当 Vue 组件从 store 中读取状态的时候,若 store 中的状态...监听页面是否刷新,如果页面刷新了,将state对象存入到sessionStorage/lo
  • 前端通信那些事儿

    2020-12-09 05:37:59
    监听onstorage的event对象key的变化,实现tab间通信)</li><li>BroadCast Channel (创建一个单独通信通道,tab在这个通道内进行通信)</li></ul> <h3>Web worker通信 <ul><li>Main ...
  • 基于 vue3.0-beta 及 qiankun2.0 极速尝鲜!微前端进阶实战项目。 项目地址:wl-mfe 微前端实战详细入门教程及解放方案请转至我另一篇文章:微前端实战看这篇就够了 - Vue项目篇。 项目地址:wl-micro-frontends [wl...

空空如也

空空如也

1 2
收藏数 22
精华内容 8
关键字:

vue监听全局对象变化

vue 订阅