**本文只帮助于理解vue2.0怎么做到事件绑定、双向数据绑定、vue底层处理**
### 下面看下mvvm解释图

![vue20220729.png](https://github.com/Quietly-20201113/PictureSpace/blob/main/vue/vue20220729.png?raw=true)


![vue-20220729.png](https://github.com/Quietly-20201113/PictureSpace/blob/main/vue/vue-20220729.png?raw=true)

### vue是一个mvvm模式的渐进式框架

>Vue与React、Angular的不同是，但它是渐进的

使用Angular，必须接受以下东西

>1、必须使用它的模块机制
>
>2、必须使用它的依赖注入
>
>3、必须使用它的特殊形式定义组件

使用React，你必须理解

> 1、函数式编程的理念
>
> 2、需要知道它的副作用
>
> 3、什么是纯函数
>
> 4、如何隔离、避免副作用



### MVVM初始化

在Vue初始化时会根据id获取dom对命令进行解析

#### 1、根据dom获取对HTML进行解析

解析`on`命令,实现事件注册

> 将on指令进行切割去除`on:click`中的click进行事件注册
>
> ```JavaScript
> // 将on命令根据dom进行注册(node为dom)
> eventHandler: function(node, vm, exp, dir) {
>         var eventType = dir.split(':')[1],
>             fn = vm.$options.methods && vm.$options.methods[exp];
> 
>         if (eventType && fn) {
>             node.addEventListener(eventType, fn.bind(vm), false);
>         }
>     },
> ```
>
> 

解析v-model

> 将v-model命令注册进入input监听中
>
> ```JavaScript
> node.addEventListener('input', function(e) {
>             var newValue = e.target.value;
>             if (val === newValue) {
>                 return;
>             }
> 
>             me._setVMVal(vm, exp, newValue);
>             val = newValue;
>         });
> ```
>
> 如何做到input监听与html中input相互绑定呢???
>
> 当数据发生改变时会将新数据塞入dom中

#### 在初始化时做了什么操作呢?

在vue初始化时会将`dom`,`options`,一起传入

> options : {data,methods,...}

##### 第一步:

将`options`函数中的数据注入defineProperty进行`get`,`set`,同时将`data`对象中注入计算

```javascript
///me : this
Object.defineProperty(me, key, {
            configurable: false,
            enumerable: true,
            get: function proxyGetter() {
                return me._data[key];
            },
            set: function proxySetter(newVal) {
                me._data[key] = newVal;
            }
        });
```

计算属性的实现

获取到`options`中的key,在`Object.defineProperty`进行get返回即可

##### 第二步:

将`options`传入监听者`Observer`进行`Object.defineProperty`监听,并同时初始化订阅者`Dep`,当数据发生变化时会通知订阅者

##### 第三步:

将`dom`中传入命令解析器中对命令进行解析,详情看`[根据dom获取对HTML进行解析]`

### 监听者职责

将数据放入`Object.defineProperty`中,并添加进入订阅者集合,

当数据发生变化时,会通知订阅者进行处理

### 订阅者职责

当监听者通知订阅者时,订阅者将数据产生变化传递给观察者

然后根据订阅者集合中数据进行数据更新

### 监听属性怎么来的呢

在`mvvm`初始化时同步将`options`传入了观察者,当数据通知到观察者是,就会进行数据更新,进而达到了数据监听的目的

`watch`

vue2.0响应式源码解析

gulp构建原生项目-打包与压缩

[gulp官网](https://www.gulpjs.com.cn/)
# 1、图解
![示例图1](https://github.com/Quietly-20201113/PictureSpace/blob/main/gulp/gulp-build.png?raw=true "示例图1")

![gulp-build.png](https://github.com/Quietly-20201113/PictureSpace/blob/main/gulp/gulp.png?raw=true)

# 2、 环境支持
> 安装node
> 全局安装 gulp/gulp-cli
>

# 3、业务gulpfile.js脚手架解析
**注意事项**

> `项目内文件名引入需要从public开始(../../public/....)`
> `尽量不在css内将图片写成背景(可转换成base64)`
> `文件名命名:所有文件名命名不能相同(公共模块与功能内部公共模块命名分开)`
> `每次重新发布之后会导致首屏加载变慢(仅仅只是发布之后,会加载新文件)`

## 3.1、插件准备
```js
const gulp = require('gulp');
const babel = require('gulp-babel');//把es6语法解析成es5
const concat = require('gulp-concat');//合并
const uglify = require('gulp-uglify');//压缩
const rev = require('gulp-rev');//对文件名加MD5后缀
const revCollector = require('gulp-rev-collector');//替换路径
const htmlmin = require('gulp-htmlmin'); //压缩html里面的js，css，去除空格
const del = require('del');//删除文件
```
在package.json中逐个添加插件
****
## 3.2、业务gulpfile.js脚本解析
### 3.2.1、建立js处理任务
> 获取所有需要处理的js文件
> 对文件名添加MD5后缀
> ~~压缩文件,es6解析成es5~~ (不启用压缩生产环境需要调试,不启用es6转es5保持es6特性,防止产生不必要问题)
>
```js
gulp.task('js',async function(){
		/////获取publick/js下所有文件夹以下的.js文件
		return gulp.src('./public/js/**/*.js')
		.pipe(rev())//添加MD5文件后缀
		.pipe(gulp.dest('./build/public/js'))//保存文件
		.pipe(rev.manifest('rev-js-manifest.json'))//生成原始文件名与添加MD5文件名的json对象文件
		.pipe(gulp.dest('./build/json'));//将json文件名保存至build/json文件夹下
});
```
****
### 3.2.2、建立处理css任务
> 引入 css兼容处理插件
> 引入css压缩插件
```js
const autoprefix = require('gulp-autoprefixer');//兼容处理
const minifyCss = require('gulp-minify-css');//压缩
gulp.task('style',async function(){
    return gulp.src('./public/css/**/*.css')
        .pipe(autoprefix({
                browsers: ['last 2 versions'],
                cascade: false
            }))
        .pipe(minifyCss())
        .pipe(rev())
        .pipe(gulp.dest('./build/public/css'))
        .pipe(rev.manifest('rev-css-manifest.json'))
        .pipe(gulp.dest('./build/json'));
});
```
****
### 3.2.3、建立处理img任务
```js
gulp.task('images', async function (){
    return gulp.src(['./public/images/**/*.jpg',
	'./public/images/**/*.png',
	'./public/images/**/*.gif',
	'./public/images/**/*.svg'],{allowEmpty : true})
        .pipe(rev())//文件名加MD5后缀
        .pipe(gulp.dest('./build/public/images'))
        .pipe(rev.manifest('rev-images-manifest.json'))
        .pipe(gulp.dest('./build/json'));
});
```
****
### 3.2.4、建立移动无需处理插件任务
```js
gulp.task('data',async function(){
    return gulp.src(['./public/data/**/*'],{allowEmpty: true})
    .pipe(gulp.dest('./build/public/data'));
});
gulp.task('fonts',async function(){
    return gulp.src(['./public/fonts/**/*'],{allowEmpty: true})
    .pipe(gulp.dest('./build/public/fonts'));
});
gulp.task('vendor',async function(){
    return gulp.src(['./public/vendor/**/*'],{allowEmpty: true})
    .pipe(gulp.dest('./build/public/vendor'));
});
gulp.task('themes',async function(){
    return gulp.src(['./public/themes/**/*'],{allowEmpty: true})
    .pipe(gulp.dest('./build/public/themes'));
});
```
****
### 3.2.5、建立处理个别无需更改的文件
```js
//移动images文件夹下图片(只移动文件,不处理其余文件夹下)
gulp.task('imageCopy',async function(){
    return gulp.src(['./public/images/*.jpg',
	'./public/images/*.png',
	'./public/images/*.gif',
	'./public/images/*.svg'],{allowEmpty: true})
    .pipe(gulp.dest('./build/public/images'));
});
```
****
### 3.2.6、建立处理html文件任务
```js
//html压缩
gulp.task('revHtml',async function(){
    const options = {
        removeComments: true,//清除HTML注释
        // collapseWhitespace: true,//压缩HTML
        collapseBooleanAttributes: true,//省略布尔属性的值 <input checked="true"/> ==> <input />
        removeEmptyAttributes: true,//删除所有空格作属性值 <input id="" /> ==> <input />
        removeScriptTypeAttributes: true,//删除<script>的type="text/javascript"
        removeStyleLinkTypeAttributes: true,//删除<style>和<link>的type="text/css"
        minifyJS: true,//压缩页面JS
        babel:true,
        minifyCSS: true//压缩页面CSS
    };
    return gulp.src('./html/**/*.html')
        .pipe(htmlmin(options))
        .pipe(gulp.dest('./build/html'))
});
```
****
### 3.2.7、建立css内处理图片名称任务|js内处理文件名称任务
```js
gulp.task('revimg', async function() {
    //css，主要是针对img替换
    return gulp.src(['./build/json/rev-images-manifest.json', './build/css/**/*.css'],{allowEmpty : true})
        .pipe(revCollector({
            replaceReved:true
        }))
        .pipe(gulp.dest('./build/css'));
});
gulp.task('revjs', async function() {
    //css，主要是针对img替换
    return gulp.src(['./build/json/rev-js-manifest.json', './build/js/**/*.js'],{allowEmpty : true})
        .pipe(revCollector({
            replaceReved:true,
         }))
        .pipe(gulp.dest('./build/public/js'));
});
```
****
### 3.2.8、建立处理html文件内处理引入文件名任务
```js
//使用rev替换成md5文件名，这里包括html和css的资源文件也一起
gulp.task('rev', async function() {
    //html，针对js,css,img
    return gulp.src(['./build/json/**/*.json', './build/html/**/*.html'],{allowEmpty : true})
        .pipe(revCollector({
            replaceReved:true
        }))
        .pipe(gulp.dest('./build/html'));
});
```

****
### 3.2.9、建立处理js文件内处理引入文件名任务
```js
gulp.task('processJS', async function() {
    //js，针对所有文件名
    return gulp.src(['./build/json/**/*.json', './build/public/js/**/*.js'],{allowEmpty : true})
        .pipe(revCollector({
            replaceReved:true
        }))
        .pipe(gulp.dest('./build/public/js'));
});
```
## 4、命令运行
### 4.1、初始化准备
```js
//执行多个任务gulp4的用法 gulp.series()串行，gulp.parallel()并行
gulp.task('default',
	gulp.series('clean:Build', gulp.parallel('images','style','data','themes','fonts','vendor','imageCopy','revHtml','js'),'revimg','revjs',async function(){

}))
```
****
### 4.2、build文件处理
```js
	gulp.task('build',gulp.parallel('rev','processJS'),async function(){})
```
****

使用gulp进行原生项目打包压缩

参照Vue2.0MVVM模式实现数据双向绑定以及事件注册等

## MVVM升级实现功能 


### show -控制显示隐藏

### model- 数据双向绑定

### {{}}-动态绑定

### class -动态替换class

### html -动态添加html片段

### text- 动态渲染text内容

### on- 声明事件

### computed -计算属性

### $watch-内容副作用监听

### js模板引擎



#### 引入文件

> ```html
> <script src="@/public/vendor/mvvm/compile.js"></script>
>   <script src="@/public/vendor/mvvm/mvvm.js"></script>
>   <script src="@/public/vendor/mvvm/observer.js"></script>
>   <script src="@/public/vendor/mvvm/watcher.js"></script>
> ```
>
> 


#### v-show

> ```html
> <div id="show-features">
> 	<p v-show="isShow">是否是男的</p>
> 	<button v-on:click="clickTrigger">点击隐藏/显示</button>
> </div>
> ```
>
> ```javascript
> let show_vm = new MVVM({
>  el: '#show-features',
>  	data : {///data内容声明
>  		isShow : false
> 		 },
>      methods : {///methods声明方法
> 			clickTrigger : (e) => {
>              this.isShow = !this.isShow;///更新后会自动更改html进行处理
>          }
>      }
> });
> ```

#### v-model(目前实现input输入,其他后期添加)

> ```html
> <div id="model-features">
>  <input type="text" v-model="name" />
>  <p>{{name}}</p>
> </div>
> ```
>
> ```javascript
> let model_vm = new MVVM({
>  el : "#model-features",
>  data : {
>      name : '',//可自定义默认值
>  }
> });
> ///可实现input输入与value值绑定和{{}}内容同步,叫做双向绑定
> ```

#### {{}}

> ```html
> <div id="parantheses-features">
>       <h2>{{json.name}}</h2>
>       <h2>{{json.tel}}</h2>
>       <h2>{{json.sex}}</h2>
>       <h2>{{json.address}}</h2>
>  <button v-on:click="clickTrigger"> 点击更新json数据 </button>
> </div>
> ```
>
> ```javascript
> let parantheses_vm = new MVVM({
> el : "#parantheses-features",
> data : {
>  json : {
>      name : '丁平',
>      tel : 'xxxxx',
>      sex : '男',
>      address : '昆明'
>  }
> },
> methods : {
>    ///更新json对象数据,界面同步更新
>    clickTrigger : () => {
>        let _json = this.json;
>        _json.name = "丁不平";
>        _json.address = "曲靖";
>         this.json = Object.assign({},this.json,_json);///对象合并才能触发数据劫持更新html
>    }
> }
> });
> ```
>

#### text

> 与{{}}功能类似
>
> ```html
> <div>
> <p v-text="textVariable"></p>
> </div>
> ```
>
> 

#### class

> ```html
> <div id="class-features">
> <div v-class="classVariable">用户名称显示</div>
> <button v-on:click="clickTrigger">点击切换class属性</button>
> </div>
> ```
>
> ```css
> .name-color{
> color: red;
> font-size: 20px;
> 
> }
> .name{
> 	font-weight: 600;
> }
> .name-color-small{
> color: black;
> font-size: 11px;
> }
> ```
>
> ```java
> let class_vm = new MVVM({
> el : "#class-features",
> data : {
> classVariable : 'name-color',
> 
> },
> methods : {
>   clickTrigger : (e) => {
>       this.classVariable = "name-color-small";
>   }
> }
> });
> ```

#### html 

> ```html
> <div id="html-features">
>  <h4>
>      v-html可进行html装卸,可赋值htmlDOM也可赋值html字符串
>      可以配合js模板渲染操作,详情请看 js模板选人模块
>  </h4>
>  <div v-html="htmlDom"></div>
> </div>
> ```
>
> ```javascript
> let html_vm = new MVVM({
> el : "#html-features",
> data : {
> 	htmlDom : '<span>初始化暂无数据</span>',
> },
> });
> ///初始化请求装载数据
> _().then( res => {
>  let _res = res;
>  _res = "<span>数据加载成功</span>";
>  ///赋值之后自动更新html页面
>  html_vm.htmlDom = _res;
> });
> ```

#### on

> 格式 : v-on:事件
>
> 支持 : 
>
> `click`、`dblclick`、`mouseout`(鼠标移动触发系列)等等等等,
>
> 详情请看[JavaScript事件参考](https://www.w3school.com.cn/jsref/jsref_events.asp)
>
> ```html
> <div id="on-features">
>  <button v-on:click='clickTrigger'>点击事件声明</button>
>  <button v-on:dblclick="dblclickTrigger">双击事件声明</button>
>  <button v-on:mouseout="mouseoutTrigger">鼠标移出元素事件声明</button>
> </div>
> ```
>
> ```javascript
> let on_vm = new MVVM({
>  el : "#on-features",
>  methods : {
>       clickTrigger : () => {console.log('鼠标单击打印日志');},
>       dblclickTrigger : () => {console.log('鼠标双击打印日志');},
>       mouseoutTrigger : () => {console.log('鼠标移开打印日志');},
>  }
> });
> ```
>
> 

#### computed 

> 计算属性
>
> 使用场景 :`当页面中有某些数据依赖其他数据进行变动的时候,就可使用`
>
> ```html
> <div id="computed-features">
>  <input v-model="text" />
>  <input v-model="num" />
>  <h4>输入值相乘</h4>
>  <p>{{sum}}</p>
> </div>
> ```
>
> ```javascript
> let computed_vm = MVVM({
>  el : "#computed-features",
>  data : {
>      text : 0,
>      num : 0
>  },
>  computed : {
>      sum : () => {
>          return this.text * this.num;
>      }
>  }
> });
> ```
>
> 

#### $watch

>副作用监听
>
>使用场景 : `一般用于异步或者开销较大的操作`
>
>```javascript
>let vm_app = new MVVM({
>el : "xxx",
>data : {
>   json : {
>       name : "用户",
>       sex : "男"
>   }
>},
>});
>///实现监听数据
>vm_app.$watch('json', (newVale,oldVale) => {
>       console.log(`watch new word ：${newVale}`);
>       console.log(`watch old word ：${oldVale}`);
>});
>```

#### js模板渲染

> 使用场景
>
> 复杂渲染,列表,异步操作
>
> 配合v-html使用
>
> ```html
> <head>
>   <script id="interpolationtmpl" type="text/x-dot-template">
>          <div>Hi {{=it.name}}!</div>
>          <div>{{=it.age || ''}}</div>
>  </script>
> </head>
> 
> <body>
>  <div id="js-features">
>      <div v-html="htmlDom"></div>
>  </div>
> </body>
> ```
>
> ```javascript
> import doT from "../../../public/vendor/template/doT.js";
> let js_vm = new MVVM({
>  el : "#js-features",
>  data : {
>      htmlDom : '初始化加载'
>  }
> });
> 
> ///初始化数据请求
> _.then(res => {
>     let dataInter = {"name":"Jake","age":31};
>  ///获取模板
>    let interText = doT.template($("#interpolationtmpl").text());
>     js_vm.htmlDom = interText(dataInter);///给实例装载数据自动渲染给v-html
> });
> 
> ```
>
> 使用命令文档[官方文档](http://olado.github.io/doT/)
>
> 详细例子[博客园文档](https://www.cnblogs.com/inkwhite/p/9099025.html)

#### 使用规范

1、MVVM实例外部只能进行data数据更新，不能调用实例内部函数

2、v-class只能使用一个变量，多个class名请定义在实例data之中，赋值时进行字符串拼接

```javascript
let on_vm = new MVVM({
    el : "#on-features",
    data : {
        className : 'name'
    }
    methods : {
         clickTrigger : () => {
    		this.className = 'name color';
         },
        
    }
});
```



3、js模板引擎（dot）必须配合v-html使用，自行dom操作属于重复操作，MVVM实例化中以及将dom处理好，只需调用

4、MVVM模式观念可自行看vue.js

5、一个html页面可实例化多个MVVM，MVVM之间只能进行数据读取与复制，尽量一个html最多只实例化一个MVVM

6、数据初始化或者插件初始化不能在MVVM中使用，MVVM只提供用户操作事件实例化，数据初始化请求可在外层操作给实例化复制

7、目前事件声明还不能传参,但是能接受到默认参数`event`

8、公共处理数据函数需要定义在实例之外，实例内部可调用外部函数

9、外部公共函数需要给实例化data复制可进行如下操作

```javascript
let on_vm = new MVVM({
    el : "#on-features",
    data : {
        name : '名字'
    }
    methods : {
         clickTrigger : () => {
             publicClick(this);
         },
        
    }
});

const publicClick = (vm) => {
    vm.name = "名字更新了";
}
```

# 源码及其Demo

[html-mvvm-web](https://github.com/Quietly-20201113/html-mvvm-web.git)






原生MVVM配合JS模板引擎渲染搭建

Flutter1.0使用Fluwx插件调用起微信详细说明

### 甲、安装[Fluwx](https://pub.flutter-io.cn/packages/fluwx)插件

### 乙、配置apple-app-site-association文件

> ```flutter
> {
>     "applinks": {
>         "apps": [],
>         "details": [
>             {
>                 "appID": "teamID.应用BundId",
>                 "paths": [ "/app/*" ]
>             }
>         ]
>     }
> }
> ```
>
> **teamID 与应用BundId参数查找**
>
> > 1、`https://developer.apple.com/`-->`account`
> >
> > 2、![示例图1](https://github.com/Quietly-20201113/PictureSpace/blob/main/flutter_fluwx/flutter-fluwx-ios-account.png?raw=true "示例图1")
> >
> > 3、点击`identifiers`
> >
> > 4、找到自己应用点击
> >
> > 5、找到**Edit your App ID Configuration**可以看到`App ID Prefix`与`Bundle ID`
> >
> > 6、将`App ID Prefix`赋值给`teamID`,括号内容不需要；将`Bundle ID`赋值给`应用BundId`
> >
> > 7、appID完整数据为`teamID.应用BundId`中间的点别忘记
> >
> > 8、`paths`内容一般需要给个地址防止网页内部到处调起打开app的内容

### 丙、配置Associated Domains（苹果网站）

**位置在乙项第1、2、3、4、5节点处**

**Capabilities的Tab页**

> 1、将`Associated Domains`复选框选中
>
> 2、点击`save`按钮保存

### 丁、XCode配置

1、![](https://github.com/Quietly-20201113/PictureSpace/blob/main/flutter_fluwx/flutter-fluwx-ios-xcode.png?raw=true)



2、将域名写入 Domains，格式如下`applinks:你的域名`，不需要https

3、Xcode `Info`-->`URL Types` 展开点击加号 

> `Identifier`写入 `weixin`
>
> `URL Schemes`写入`微信开放平台移动应用中绑定的appID`

4、Xcode `Info`--> `Custom IOS Target Properties`-->`LSApplicationQueriesSchemes`张开添加item项

> 1、添加`value`为`weixin`的项
>
> 2、添加`value`为`weixinULAPI`的项

### 戊、flutter项目启动配置

```flutter
    await fluwx.registerWxApi(
        appId: "微信开放平台移动应用的AppId",
        doOnAndroid: true,
        doOnIOS: true,
        universalLink: "配置Xcode的域名（https：//xxxx.com/）"
```

### 己、微信开放平台配置

> 1、进入开放平台添加应用
>
> 2、申请接口信息`分享到朋友圈`、`发送给朋友`、`微信登录`等接口信息
>
> 3、修改`开发信息`,`IOS平台`、`IPad平台`的`Universal Links`配置，与flutter配置中`universalLink`一致







下面看下mvvm解释图

1、图解

MVVM升级实现功能

甲、安装[Fluwx](http

React

1、什么时候使用状态管理器?