9.20 Vue 相关总结

9.20 Vue 相关总结

一、 Vuex

1. 是什么
   官方定义： Vuex 是一个专为 Vue.js 应用程序开发的状态管理模式。它采用集中式存储管理应用的所有组件的状态，并以相应的规则保证状态以一种可预测的方式发生变化。
   核心功能：管理共享状态
   大白话：Vuex就是一个存放管理系统中可能被多个组件访问到的数据的东西，为了方便各个组件轻松访问非自己组件内的数据，就把一些变量设置为共享变量，放在Vuex里面，此时这个系统里面的所有组件只需遵守Vuex的规则就可以访问共享变量或者操作共享变量。
   2.使用场景
   适合构建单页面大型应用时使用，比如：音乐播放、登录状态、加入购物车…
   核心诉求：多个组件共享状态
   3.核心概念
   Vuex由state、getter、mutation、action和module五个部分组成。
   （1）state：Vuex 使用单一状态树,即每个应用将仅仅包含一个 store 实例，但单一状态树和模
   块化并不冲突。存放的数据状态，不可以直接修改里面的数据；单一状态树让我们直接定位任一特定的状态片段。
   （2）mutations：mutations 定义的方法动态修改 Vuex 的 store 中的状态或数据，只有mutations才能改动state里的状态，而且mutation必须是同步函数（为了实现对state里面的状态追踪）
   （3）getters：类似 vue 的计算属性，主要用来过滤一些数据，将state里面的数据经过一定的处理，这个过程在getters里面发生，并且Vuex里面的getters跟计算属性一样，getters的返回值会根据他的依赖被缓存，只有他的依赖值（state中的数据）发生了改变它才会被重新计算。
   （4）action：actions 可以理解为通过将 mutations 里面处里数据的方法变成可异步的处理数据
   的方法，简单的说就是异步操作数据。view 层通过 store.dispath 来分发 action
   （5）modules：项目特别复杂的时候，可以让每一个模块拥有自己的 state、mutation、action、
   getters，使得结构非常清晰，方便管理。

二、 Computed和Watch的区别

computed

1. 支持缓存，只有依赖数据发生改变，才会重新进行计算
2. 不支持异步，当computed内有异步操作时无效，无法监听数据的变化
   3.computed 属性值会默认走缓存，计算属性是基于它们的响应式依赖进行缓存的，也就是基于data中声明过或者父组件传递的props中的数据通过计算得到的值
3. 如果一个属性是由其他属性计算而来的，这个属性依赖其他属性，是一个多对一或者一对一，一般用computed
   5.如果computed属性属性值是函数，那么默认会走get方法；函数的返回值就是属性的属性值；在computed中的，属性都有一个get和一个set方法，当数据变化时，调用set方法。
   watch
4. 不支持缓存，数据变，直接会触发相应的操作；
   2.watch支持异步；适合开销大的操作
   3.监听的函数接收两个参数，第一个参数是最新的值；第二个参数是输入之前的值；
5. 当一个属性发生变化时，需要执行对应的操作；一对多；
6. 监听数据必须是data中声明过或者父组件传递过来的props中的数据，当数据变化时，触发其他操作，函数有两个参数，
   　　immediate：组件加载立即触发回调函数执行，
   　　deep: 深度监听，为了发现对象内部值的变化，复杂类型的数据时使用，例如数组中的对象内容的改变，注意监听数组的变动不需要这么做。注意：deep无法监听到数组的变动和对象的新增，参考vue数组变异,只有以响应式的方式触发才会被监听到。
   函数与计算属性
   计算属性
   是基于它们的响应式依赖进行缓存的。只在相关响应式依赖发生改变时它们才会重新求值。这就意味着只要依赖属性还没有发生改变，多次访问与之相关计算属性会立即返回之前的计算结果，而不必再次执行函数。
   函数
   每当触发重新渲染时，调用方法将总会再次执行函数

三、 组件之间传递数据

1. 子传父使用emit事件把数据发送给父组件

 <!-- 父组件模板 -->
  <div id="app">
    <cpnn @itemclick="cpnclick"></cpnn>
  </div>
  <!-- 子组件模板 -->
<template id="cpn">
<div>
  <button v-for="item in categories" @click="btnclick(item)">{{item.name}}</button>
</div>
</template>
  <script>
    // 子组件
    const cpnn={
      template:'#cpn',
      data(){
        return{
          categories:[
            {id:'aaa', name:'热门推荐'},
            {id:'baa', name:'shouji'},
            {id:'caa', name:'热荐'},
            {id:'daa', name:'门推荐'},

          ]
        }
      },
      methods:{
        btnclick(item){
          // console.log(item);
          // 通过自定义事件给父组件传送item
          //子组件发射事件 itemClick是事件名称 父组件需要监听事件 item是要传输的数据
          this.$emit('itemclick',item)
        }
      }
    }
    // 父组件
    var vm = new Vue({
      el: '#app',
      data: {
        message: '嘿嘿'
    },
      methods: {
        cpnclick(item){
          console.log('pp');
          console.log(item);
        }
      },
      components:{
        cpnn
      }
    });
  </script>

2. 父传子 子组件通过定义props属性接收来自父组件的数据

<div id="app">
      <!-- v-bind不支持驼峰语法 cInfo转化为c-info -->
      <cpn2 :cfruits="fruits" :cmesssage="message" :c-info="info"></cpn2>
    </div>
    <template id="cpn">
      <!-- 最好每次都有根组件div -->
      <div>
        <ul>
          <li v-for="item in cfruits">{{item}}</li>
        </ul>

        {{cmesssage}}
        <h1>{{cInfo}}</h1>
      </div>
    </template>
    <script>
      const cpn2 = {
        template: "#cpn",
        // 第一种写法 数组类型
        // props: ["cfruits", "cmesssage"],
        // 第二种写法 对象类型 并且可以对传入的数据做一个类型限制
        props:{
          // cfruits:Array,
          // cmessage:String
          // 2 提供默认值 当没有传入cmessage数据时候 就会显示默认值 
          cmesssage:{
            type: String,
            default: 'chushi',
            // 必须要传的值
            require: true

          },
          //当数组类型 默认值必须是从一个工厂函数获取 
          cfruits:{
            type:Array,
            default(){
              return[]
            }
          },
          cInfo:{
            type:Object,
            default(){
              return {}
            }
          }

        }
      };
      var vm = new Vue({
        el: "#app",
        data: {
          message: "嘿嘿",
          fruits: ["apple", "orange", "banana"],
          info:{
            name:'ynn',
            age:21,
            height:1.68
          }
        },
        methods: {},
        components: {
          cpn2,
        },
      });
    </script>

四、 MVVM和MVC

什么是MVVM
这 MVVM 是 Model-View-ViewModel 的缩写。MVVM 是一种设计思想。Model 层代表数据模型，也
可以在 Model 中定义数据修改和操作的业务逻辑；View 代表 UI 组件，它负责将数据模型转
化成 UI 展现出来，View 是一个同步 View 和 Model 的对象
 在 MVVM 架构下，View 和 Model 之间并没有直接的联系，而是通过 ViewModel 进行交互，
Model 和 ViewModel 之间的交互是双向的， 因此 View 数据的变化会同步到 Model 中，而
Model 数据的变化也会立即反应到 View 上。
对 ViewModel 通过双向数据绑定把 View 层和 Model 层连接了起来，而 View 和 Model 之间的
同步工作完全是自动的，无需人为干涉，因此开发者只需关注业务逻辑，不需要手动操作
DOM, 不需要关注数据状态的同步问题，复杂的数据状态维护完全由 MVVM 来统一管理。
MVVM 和MVC 区别
这 mvc 和 mvvm 其实区别并不大。都是一种设计思想。主要就是 mvc 中 Controller 演变成
mvvm 中的 ViewModel。mvvm 主要解决了 mvc 中大量的 DOM 操作使页面渲染性能降低，加载速
度变慢，影响用户体验。
区别：vue 数据驱动，通过数据来显示视图层而不是节点操作。
它和其它框架（jquery）的区别是什么?
场景：数据操作比较多的场景，更加便捷。

持续更新。。。