zoukankan      html  css  js  c++  java
  • Vuex相关

    你知道路由钩子吗?
    路由钩子分为全局钩子、路由独享钩子、组件内钩子,全局钩子用来拦截所有的路由的,进行处理,路由独享钩子,本质上和后面的组件内钩子是一样的。都是特指的某个路由。不同的是,这里的一般定义在router当中,而不是在组件内。组件内钩子,是将钩子函数定义在组件内部了

    项目中如果涉及多个组件数据共享你如何解决?
    可以启用vuex

    vuex中的五个属性都是什么? 有什么作用?
    State 存储数据
    Getter 可以认为是 store 的计算属性,它的返回值会根据它的依赖被缓存起来,且只有当它的依赖值发生了改变才会被重新计算。
    Mutation 更改 Vuex 的 store 中的状态的唯一方法是提交 mutation
    Action 包含任意异步操作,通过提交 mutation 间接更变状态
    Module 将 store 分割成模块,每个模块都具有state、mutation、action、getter、甚至是嵌套子模块

    .

    Vue 实现数据双向绑定的原理:Object.defineProperty()

    vue实现数据双向绑定主要是:采用 数据劫持结合发布者-订阅者模式 的方式,通过 Object.defineProperty() 来劫持各个属性的setter,getter,在数据变动时发布消息给订阅者,触发相应监听回掉。当把一个普通 JavaScript 对象传给Vue 实例来作为它的 data 选项时,Vue 将遍历它的属性,用Object.defineProperty 将他们转为 getter/setter。用户看不到getter / setter ,但是在内部它们让vue追踪依赖,在属性被访问和修改时通知变化。

    vue的数据双向绑定 将MVVM作为数据绑定的入口,整合Observer,Complie 和 Watcher三者,通过Observer来监听自己的model的数据变化,通过Complie来解析编译模板指令(vue中是用来解析 {{ }} ),最终利用watcher搭起observer和complie之间的通信桥梁,达到数据变化 ==》 视图更新,视图交互变化(input)==》 数据model变更双向绑定效果。
    js实现简单的双向绑定

    <body>
        <div id="app">
            <input type="text" id="txt">
            <p id="show"></p>
        </div>
    </body>
    <script type="text/javascript">
        var obj = {};
        Object.defineProperty(obj, 'txt', {
            get: function () {
                return obj
            },
            set: function (newValue) {
                document.getElementById('txt').value = newValue;
                document.getElementById('show').innerHTML = newValue;
            }
        })
        document.addEventListener('keyup', function (ev) {
            obj.txt = ev.target.value;
        })
    </script>
    

    四、Vue 组件间的参数传递

    1.父组件与子组件传值
    父组件传给子组件: 子组件通过props方法接受数据;
    子组件传给父组件:$emit方法传递参数;
    2.非父子组件间的数据传递,兄弟组件传值
    EventBus,就是创建一个事件中心,相当于中转站,可以用它来传递事件和接受事件,项目比较小时,用这个比较合适;
    VueX,创建一个数据仓库,整个项目全局都可以往这个仓库存放数据和读取数据

    五、Vue的路由实现:hash模式 和 history模式
    hash模式: 在浏览器中符号 “#” 以及#后面的字符称之为hash,用window.location.hash读取;
    特点:hash虽然在URL中,但不被包括在HTTP请求中,用来指导浏览器动作,对服务端安全无用,hash不会重新加载页面。

    history模式:history 采用HTML5的新特性;且提供了两个新方法:pushState()、replaceState()可以对浏览器历史纪录栈进行修改,以及popState事件监听到状态变更。

    六、 Vue与Angular以及React的区别?
    (版本不断更新,以下区别有可能不是很正确,我的工作中只用到vue,对angular和react不怎么熟)
    1.与AngularJs的区别
    相同点:都支持指令,内置指令和自定义指令;都支持过滤器:内置过滤器和自定义过滤器;都支持双向数据绑定,都不支持低端浏览器;

    不同点:AngularJs的学习成本高,比如Dependency、Injecttion特性,而vue.js本身提供的API都比较简单、直观;在性能上,AngularJs依赖对数据做脏检查,所以watcher越多越慢;Vue.js使用基于依赖追踪的观察并且使用异步队列更新,所以的数据都是独立触发的。

    2. 与React的区别
    相同点:
    React采用独特的JSX语法,Vue.js 在组件开发中也推崇编写.vue特殊文件格式,对文件内容都有一些约定,两者都需要编译后使用;中心实现相同:一切都是组件,组件实例之间可以嵌套;都提供合理的钩子函数,可以让开发者定制化底去处理需求,都不内置列数Ajax,Route等功能到核心包,而是以插件的方式加载;在组件开发中都支持mixins的特性了;

    不同点:
    React采用Virtual DOM会对渲染出来的结果做脏检查;Vue.js在模板中提供了指令,过滤器等,可以非常方便,快捷的操作Virtual DOM。

    七、Vue路由的钩子函数

    首页可以控制导航跳转,beforeEach,afterEach等。一般用于页面title的修改,一些需要登录才能调整页面重定向功能。
    beforeEach 主要的3个参数to,from,next;
    to : route即将进入的目标路由对象、
    from: route当前导航正要离开的路由、
    next: function一定要调用该方法resolve这个钩子。执行效果依赖next方法的调用参数。可以控制网页的跳转

    八、Vuex是什么?怎么使用?那种功能场景使用它?

    只要来读取的状态集中放在store中;改变状态的方式就是提交mutations。这是个同步的实物;异步逻辑应该封装中action中。
    在main.js引入store,注入。新建一个目录store,...export。
    场景有: 单页面应用,组件之间的状态,音乐播放,登录状态,加入购物车


     
    vuex.jpg

    state
    Vuex 使用单一状态树,既每个应用将仅仅包含一个store实例,单单一状态树和模块化并不冲突。存放的数据状态,不可以直接修改里面的数据。
    mutations
    mutations定义的方法动态修改Vuex的store中的状态或数据。
    getters
    类似vue的计算属性,主要用来过滤一些数据。
    action
    action可以理解为通过mutations里面处理数据的方法变成可异步的处理数据的方法,简单的说就是异步操作数据。view层通过store.dispath来分配action。

    const store = new Vuex.Store({
      state: {
        count: 0
      },
      mutations: {
        increment(state) {
          state.count++;
        }
      },
      actions: {
        increment(context) {
          context.commit('increment')
        }
      }
    })
    

    modeules
    项目特别复杂的时候,可以让每一个模块拥有自己的state,mutation,action,getters,使得结构非常清晰,方便管理

      const modulesA = {
        state: { ... },
        mutations: { ... },
        actions: { ... }
        }
      }
    
      const modulesB = {
        state: { ... },
        mutations: { ... },
        actions: { ... }
        }
      }
    
    const store = new Vuex.store({
      modules: {
        a: modulesA,
        b: modulesB
      }
    })


    .

  • 相关阅读:
    播放m3u文件时不能时时更新的问题
    Oracle视图详解
    Oracle视图的作用与安全性
    Ext GridPanel 表头合并
    [AJAX] 001 AJAX核心操作
    [Java] 系统环境变量配置
    [AJAX] 002 AJAX异步验证
    判断文章/帖子操作权限
    让Tee 7.x版本和FastReport 3.x版本共存
    mysql基本语句
  • 原文地址:https://www.cnblogs.com/fightjianxian/p/11338072.html
Copyright © 2011-2022 走看看