标签:现在 new 数据模型 带来 mon store 目的 前端 update
该博客的主要目的是将面试中常见的概念总结,方便快速去了解。
MVVM 是 Model-View-ViewModel 的缩写。mvvm 是一种设计思想。Model 层代表数据模型,也可以在 Model 中定义数据修改和操作的业务逻辑;View 代表 UI 组件,它负责将数据模型转化成 UI 展现出来,ViewModel 是一个同步 View 和 Model 的对象。
在 MVVM 架构下,View 和 Model 之间并没有直接的联系,而是通过 ViewModel 进行交互,Model 和 ViewModel 之间的交互是双向的, 因此 View 数据的变化会同步到 Model 中,而 Model 数据的变化也会立即反应到 View 上。
ViewModel 通过双向数据绑定把 View 层和 Model 层连接了起来,而 View 和 Model 之间的同步工作完全是自动的,无需人为干涉,因此开发者只需关注业务逻辑,不需要手动操作 DOM, 不需要关注数据状态的同步问题,复杂的数据状态维护完全由 MVVM 来统一管理。
mvc 和 mvvm 其实区别并不大。都是一种设计思想。主要就是 mvc 中 Controller 演变成 mvvm 中的 viewModel。mvvm 主要解决了 mvc 中大量的 DOM 操作使页面渲染性能降低,加载速度变慢,影响用户体验。和当 Model 频繁发生变化,开发者需要主动更新到 View 。
答:总共分为 8 个阶段创建前/后,载入前/后,更新前/后,销毁前/后。
//父组件通过标签上面定义传值
<template>
<Main :obj="data"></Main>
</template>
<script>
//引入子组件
import Main form "./main"
exprot default{
name:"parent",
data(){
return {
data:"我要向子组件传递数据"
}
},
//初始化组件
components:{
Main
}
}
</script>
//子组件通过props方法接受数据
<template>
<div>{{data}}</div>
</template>
<script>
exprot default{
name:"son",
//接受父组件传值
props:["data"]
}
</script>
//子组件通过$emit方法传递参数
<template>
<div v-on:click="events"></div>
</template>
<script>
//引入子组件
import Main form "./main"
exprot default{
methods:{
events:function(){
}
}
}
</script>
//
<template>
<div>{{data}}</div>
</template>
<script>
exprot default{
name:"son",
//接受父组件传值
props:["data"]
}
</script>
vue-router 模块的 router-link 组件。
在实际项目中我们会碰到多层嵌套的组件组合而成,但是我们如何实现嵌套路由呢?因此我们需要在 VueRouter 的参数中使用 children 配置,这样就可以很好的实现路由嵌套。 index.html,只有一个路由出口
<div id="app">
<!-- router-view 路由出口, 路由匹配到的组件将渲染在这里 -->
<router-view></router-view>
</div>
main.js,路由的重定向,就会在页面一加载的时候,就会将 home 组件显示出来,因为重定向指向了 home 组件,redirect 的指向与 path 的必须一致。children 里面是子路由,当然子路由里面还可以继续嵌套子路由。
import Vue from ‘vue‘
import VueRouter from ‘vue-router‘
Vue.use(VueRouter)
//引入两个组件
import home from "./home.vue"
import game from "./game.vue"
//定义路由
const routes = [
{ path: "/", redirect: "/home" },//重定向,指向了home组件
{
path: "/home", component: home,
children: [
{ path: "/home/game", component: game }
]
}
]
//创建路由实例
const router = new VueRouter({routes})
new Vue({
el: ‘#app‘,
data: {
},
methods: {
},
router
})
home.vue,点击显示就会将子路由显示在出来,子路由的出口必须在父路由里面,否则子路由无法显示。
<router-link :to="index">
router.push(‘index‘)
webpack 中提供了 require.ensure()来实现按需加载。以前引入路由是通过 import 这样的方式引入,改为 const 定义的方式进行引入。
import home from ‘../../common/home.vue‘
const home = r => require.ensure( [], () => r (require(‘../../common/home.vue‘)))
vue 框架中状态管理。在 main.js 引入 store,注入。新建了一个目录 store,….. export 。场景有:单页应用中,组件之间的状态。音乐播放、登录状态、加入购物车
// 新建 store.js
import vue from ‘vue‘
import vuex form ‘vuex‘
vue.use(vuex)
export default new vuex.store({
//...code
})
//main.js
import store from ‘./store‘
...
三种
v-if(判断是否隐藏)、v-for(把数据遍历出来)、v-bind(绑定属性)、v-model(实现双向绑定)
vue.js 是采用数据劫持结合发布者-订阅者模式的方式,通过 Object.defineProperty()来劫持各个属性的 setter,getter,在数据变动时发布消息给订阅者,触发相应的监听回调。
具体步骤: 第一步:需要 observe 的数据对象进行递归遍历,包括子属性对象的属性,都加上 setter 和 getter 这样的话,给这个对象的某个值赋值,就会触发 setter,那么就能监听到了数据变化
第二步:compile 解析模板指令,将模板中的变量替换成数据,然后初始化渲染页面视图,并将每个指令对应的节点绑定更新函数,添加监听数据的订阅者,一旦数据有变动,收到通知,更新视图
第三步:Watcher 订阅者是 Observer 和 Compile 之间通信的桥梁,主要做的事情是:
第四步:MVVM 作为数据绑定的入口,整合 Observer、Compile 和 Watcher 三者,通过 Observer 来监听自己的 model 数据变化,通过 Compile 来解析编译模板指令,最终利用 Watcher 搭起 Observer 和 Compile 之间的通信桥梁,达到数据变化 -> 视图更新;视图交互变化(input) -> 数据 model 变更的双向绑定效果。
有 5 种,分别是 state、getter、mutation、action、module
如果请求来的数据不是要被其他组件公用,仅仅在请求的组件内使用,就不需要放入 vuex 的 state 里
如果被其他地方复用,请将请求放入 action 里,方便复用,并包装成 promise 返回
axios 是请求后台资源的模块。 npm i axios -S
如果发送的是跨域请求,需在配置文件中 config/index.js 进行配置
该博客版权归原作者所有,此处仅做学习交流。
标签:现在 new 数据模型 带来 mon store 目的 前端 update
原文地址:https://www.cnblogs.com/w-yue/p/11758755.html