标签：nal 变量 多层 区分 seo 因此 数据源 显示 dom操作
// 如何让实现响应式的呢？
let obj = {};
let name = 'zhangsan';
Object.defineProperties(obj, name, {get : function() {
console.log('name' , name)
}, set : function() {
console.log('name' , name)
}})
// 1. 关键是理解Object.defineProperty
// 2. 将data的属性代理到vm上面的
let mv = {};
let data = {
price: 100,
name: 'zhangsan'
};
for (let key in data) {
(function (key) {
Object.defineProperty(mv, key, {
get: function () {
console.log('get val');
return data[key];
},
set: function (val) {
console.log('set val');
data[key] = val;
}
})
})(key);
} <div id="app">
<div>
<input v-model="title">
<button v-on:click="add">submit</button>
</div>
<ul>
<li v-for="item in list">{{item}}</li>
</ul>
</div> // 1(*****). 模板实际上就是一个字符串………………(vue中的模板的本质)
// 2. 模板有逻辑，如v-if, v-for
// 3. 与html格式很像，但是有很大的区别
// 4. 最终还是要转换为html来显示
// 5(*****). 模板最终必须转换成JS代码，因为：
// （1）有逻辑(v-if v-for)：必须用JS才能实现（图灵完备）
// (2) 转换成HTML来渲染页面，必须用JS才能实现
// (3) 因此，模板最终要转换成为一个JS函数（render函数）var obj = {
name: 'zhangsan',
age: 20,
getAddress(){
alert('shanghai');
}
}
// 不使用with
function fn() {
alert(obj.name);
alert(obj.age);
obj.getAddress();
}
// 使用with(代码不易维护！！！)
function fn1() {
with(obj){
alert(name);
alert(age);
getAddress();
}
}
fn();
fn1();
<div id='app'>
<p>{{price}}</p>
</div>
// 使用with限制这个作用域里面的this
with(this) {
return _c( // this._c
'div',
{
attrs: {"id" : "app"} // id=app
},
[
_c('p', [_v(_s(price))]) // this._c('p', [_v(_s(price))])
]
)
}
// 实现一个自己的render函数
var vm = new Vue({
el: '#app',
data: {
price: 100
}
});
function render() {
with (vm) {
return _c(
'div',
{
attrs: {'id': 'app'}
},
[
_c('p', [_v(_s(price))])
]
);
}
}
function render() {
return vm._c(
'div',
{
attrs: {'id': 'app'}
},
[
// vm._v 转换为一个文本节点
// vm._s 转换为一个字符串
// vm._c 转换为一个DOM节点
vm._c('p', [vm._v(vm._s(price))])
]
);
}<div id="app">
<div>
<input type="text" v-model="title">
<button @click="add">submit</button>
</div>
<div>
<ul>
<li v-for="item in list">{{item}}</li>
</ul>
</div>
</div>with (this) {
// this 就是vm
return _c(
'div',
{attrs: {"id": "app"}},
[
_c('div',
[
_c('input', {
directives: [{
name: "model",
rawName: "v-model",
value: (title),
expression: "title"
}],
attrs: {"type": "text"},
domProps: {"value": (title)},
on: {
"input": function ($event) {
if ($event.target.composing) return;
title = $event.target.value
}
}
}),
_v(" "),
_c('button',
{
on: {
"click": add
}
},
[_v("submit")]
)
]
),
_v(" "),
_c('div',
[
_c(
'ul',
// 这里返回的是一个数组（li标签组成的数组）
_l((list), function (item) {
return _c('li', [_v(_s(item))])
}), 0
)
]
)
]
)
}
// view ---> data ---> 使用input的事件绑定 ---> 更新页面数据到data
// data ---> view ---> defineProperty ---> 同步数据到页面 vm._update(vnode) {
const prevNode = vm._vnode;
vm._vnode = vnode;
if (!prevNode) {
// 首次渲染的时候
vm.$el = vm.__patch__(vm.$el, vnode);
}
else{
vm.$el = vm.__patch__(prevNode, vnode);
}
}
// 开始更新vue组件（修改data的属性的时候，Object.defineProperty）
function updateComponent() {
vm._update(vm._render());
}******（问题总结）
<template></template> --->>> render 函数[!NOTE]
- with函数的使用
- 模板中的所有信息都被render函数包含
- 模板中用到的data中的属性，都变成了JS变量
- 模板中的v-model v-for v-on都变成了JS逻辑
- render函数返回vnode
- Object.defineProperty
- 将data的属性代理到vm上
with(vm) {
}[!NOTE]
- 初次渲染，执行updateComponent, 执行vm._render()
- 执行render函数，会访问到vm.list和vm.title属性
- 会被响应式的get方法监听到(Object.defineProperty)
Object.defineProperty(mv, key, {
get: function() {
return data[key];
}
})
- 执行updateComponent, 会执行vdom的patch方法
- patch将vnode渲染成DOM，初次渲染完成
[!NOTE]
- data中有很多属性，有些会被用到，有些可能不被用到
- 被用到的会走到get, 不被用到的不会走到get
- 未走到get中的属性，set的时候我们也无需关心
- 避免不必要的重复渲染（关键点）
vm._update(vnode) {
const prevNode = vm._vnode;
vm._vnode = vnode;
if (!prevNode) {
// 首次渲染的时候
vm.$el = vm.__patch__(vm.$el, vnode);
}
else{
vm.$el = vm.__patch__(prevNode, vnode);
}
}
// 开始更新vue组件（修改data的属性的时候，Object.defineProperty）
function updateComponent() {
vm._update(vm._render());
} Object.defineProperty(mv, key, {
set: function(newVal) {
data[key] = newVal;
// 开始执行
updateComponnet()
}
})[!NOTE]
- 修改属性，被响应式的set监听到
- set中执行updateComponnet
- updateComponent重新执行vm._render()
- 生成的vnode和preVnode, 通过patch进行对比
- 渲染到html中去
- Object.defineProperty
- data的属性代理到vm上面（with）
给data添加新属性的时候vm.$set(vm.info,‘newKey‘,‘newValue‘)
data上面属性值是数组的时候，需要用数组的方法操作数组，而不能通过index或者length属性去操作数组，因为监听不到属性操作的动作。
[!NOTE]
上面说了vm负责让数据变了，视图能自动发生变化。这么神奇魔术背后的原理是Object.defineProperty。其实就是属性的读取和设置操作都进行了监听，当有这样的操作的时候，进行某种动作。来一个demo玩下。
// 对obj上面的属性进行读取和设置监听
let obj = {
name:'huahua',
age:18
}
function observer(obj){
if(typeof obj === 'object'){
for (const key in obj) {
defineReactive(obj,key,obj[key])
}
}
}
// get的return的值才是最终你读取到的值。所以设的值是为读取准备的。
// set传的参数是设置的值，注意这里不要有obj.name = newVal 这样又触发set监听，会死循环的。
function defineReactive(obj,key,value){
Object.defineProperty(obj,key,{
get:function(){
console.log('你在读取')
// happy的话这边可以value++，这样你发现读取的值始终比设置的大一个，因为return就是读取到的值
return value
},
set:function(newVal){
console.log('数据更新了')
value = newVal
}
})
}
observer(obj)
obj.age = 2
console.log(obj.age)[!NOTE]
在浏览器执行的时候，控制台随手也可以obj.name="hua1"类似的操作，发现都监听到了。但是如果更深一步，obj.name={firstname:‘hua‘,lastname:‘piaoliang‘};obj.name.lastname=‘o‘就不能监听到属性修改了。因为并没有将新的赋值对象监听其属性。所以函数需要改进。
需要在defineReactive的第一行加上observer(value)。设置值的时候如果是对象的话，也需要将这个对象数据劫持。同理，set那边也需要加这行。
function defineReactive(obj,key,value){
// 注意这里！！！！！！！
observer(value)
Object.defineProperty(obj,key,{
get:function(){
return value
},
set:function(newVal){
// 注意这里！！！！！！！
observer(newVal)
console.log('数据更新了')
value = newVal
}
})
}如果obj.name=[1,2,3];obj.name.push(4)发现又没有通知了，这是因为Object.defineProperty不支持监听数组变化。所以需要重写数组上面的方法。
// 把数组上大部分方法重写了，这里不一一列举。但是如果你 [1,2].length--，这是捕捉不到的
let arr = ['push','slice','split']
arr.forEach(method=>{
let oldPush = Array.property[method]
Array.property[method] = function(value){
console.log('数据更新')
oldPush.call(this, value)
}
})vue.js 是采用数据劫持结合发布者-订阅者模式的方式，通过 Object.defineProperty()来劫持各个属性的 setter，getter，在数据变动时发布消息给订阅者，触发相应的监听回调。
第一步：需要 observe 的数据对象进行递归遍历，包括子属性对象的属性，都加上 setter 和 getter 这样的话，给这个对象的某个值赋值，就会触发 setter，那么就能监听到了数据变化
第二步：compile 解析模板指令，将模板中的变量替换成数据，然后初始化渲染页面视图，并将每个指令对应的节点绑定更新函数，添加监听数据的订阅者，一旦数据有变动，收到通知，更新视图
第四步：MVVM 作为数据绑定的入口，整合 Observer、Compile 和 Watcher 三者，通过 Observer 来监听自己的 model 数据变化，通过 Compile 来解析编译模板指令，最终利用 Watcher 搭起 Observer 和 Compile 之间的通信桥梁，达到数据变化 -> 视图更新；视图交互变化(input) -> 数据 model 变更的双向绑定效果。
当属性值是数组，数组变化的时候，跟踪不到变化。因为数组虽然是对象，但是Object.defineProperty不支持数组，所以vue改写了数组的所有方法，当调用数组方法的时候，就调动变动事件。但是不能通过属性或者索引控制数组，比如length，index。
[!NOTE]
总结：data上，绑定所有属性避免后期加新属性。如果是数组，只能通过数组方法修改数组。如下例子，控制台vm.arr--发现视图并不会变化，vm.arr.push(4)就能变化
<div id="app">{{msg}}{{arr}}</div>
<script src="node_modules/vue/dist/vue.js"></script>
<script>
let vm = new Vue({
el:'#app',
// template加上之后会替换掉#app这个标签
// template:'<h1>en</h1>',
data:{msg:'msg',arr:[1,2,3]}
})
vm.msg = 'msg'
</script>总共分为 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'
...有 5 种，分别是 state、getter、mutation、action、module
如果请求来的数据不是要被其他组件公用，仅仅在请求的组件内使用，就不需要放入 vuex 的 state 里
如果被其他地方复用，请将请求放入 action 里，方便复用，并包装成 promise 返回
vuex 仅仅是作为 vue 的一个插件而存在，不像 Redux,MobX 等库可以应用于所有框架，vuex 只能使用在 vue 上，很大的程度是因为其高度依赖于 vue 的 computed 依赖检测系统以及其插件系统，
vuex 整体思想诞生于 flux,可其的实现方式完完全全的使用了 vue 自身的响应式设计，依赖监听、依赖收集都属于 vue 对对象 Property set get 方法的代理劫持。最后一句话结束 vuex 工作原理，vuex 中的 store 本质就是没有 template 的隐藏着的 vue 组件；
Vue.use(Vuex) 方法执行的是 install 方法，它实现了 Vue 实例对象的 init 方法封装和注入，使传入的 store 对象被设置到 Vue 上下文环境的\(store 中。因此在 Vue Component 任意地方都能够通过 this.\)store 访问到该 store。
在 store 构造方法中有 makeLocalContext 方法，所有 module 都会有一个 local context，根据配置时的 path 进行匹配。所以执行如 dispatch(‘submitOrder‘, payload)这类 action 时，默认的拿到都是 module 的 local state，如果要访问最外层或者是其他 module 的 state，只能从 rootState 按照 path 路径逐步进行访问。
store 初始化时，所有配置的 action 和 mutation 以及 getters 均被封装过。在执行如 dispatch(‘submitOrder‘, payload)的时候，actions 中 type 为 submitOrder 的所有处理方法都是被封装后的，其第一个参数为当前的 store 对象，所以能够获取到 { dispatch, commit, state, rootState } 等数据。
Vuex 中修改 state 的唯一渠道就是执行 commit(‘xx‘, payload) 方法，其底层通过执行 this._withCommit(fn) 设置_committing 标志变量为 true，然后才能修改 state，修改完毕还需要还原_committing 变量。外部修改虽然能够直接修改 state，但是并没有修改_committing 标志位，所以只要 watch 一下 state，state change 时判断是否_committing 值为 true，即可判断修改的合法性。
devtoolPlugin 中提供了此功能。因为 dev 模式下所有的 state change 都会被记录下来，‘时空穿梭‘ 功能其实就是将当前的 state 替换为记录中某个时刻的 state 状态，利用 store.replaceState(targetState) 方法将执行 this._vm.state = state 实现。
v-if(判断是否隐藏)、v-for(把数据遍历出来)、v-bind(绑定属性)、v-model(实现双向绑定)
[!NOTE]
思路：使用Vue的router.beforeEach钩子函数结合axios的拦截器功能来实现。
标签：nal 变量 多层 区分 seo 因此 数据源 显示 dom操作
原文地址：https://www.cnblogs.com/fecommunity/p/11922129.html
