第
Vue2?中的数据劫持简写示例
目录package.json相关依赖Webpack.config.js配置文件public/index.html文件内容全部文件目录结构实例一个模拟的Vue应用vue/index.js文件主要是负责初始化内容initState方法核心文件vue/observer.jsvue/observer.js文件对数组进行处理
package.json相关依赖
我们今天要编写的项目通过需要使用Webpack进行编译，package.json相关依赖如下：
{
scripts:{
dev:webpack-dev-server,
build::webpack
devDependencies:{
html-webpack-plugin:^4.5.2,
webpack:^4.46.0,
webpack-cli:^3.3.12,
webpack-dev-server:^3.11.3
Webpack.config.js配置文件
constpath=require(path);
constHtmlWebpackPlugin=require(html-webpack-plugin);
module.exports={
entry:./src/index.js,
output:{
filename:bundle.js,
path:path.resolve(__dirname,dist)
devtool:source-map,
resolve:{
//表示解析模块引入的时候先从当前文件夹寻找模块，再去node_modules找模块
modules:[
path.resolve(__dirname,),
path.resolve(__dirname,node_modules)
plugins:[
newHtmlWebpackPlugin({
template:path.resolve(__dirname,public/index.html)
public/index.html文件内容
!DOCTYPEhtml
htmllang=en
head
metacharset=UTF-8/
metahttp-equiv=X-UA-Compatiblecontent=IE=edge/
metaname=viewportcontent=width=device-width,initial-scale=1.0/
title/title
/head
body
divid=app/div
/body
/html
全部文件目录结构
好了，接下来我们就开始发车！
实例一个模拟的Vue应用
首先，我们需要编写我们的入口文件index.js，该文件很普通主要就是实例一个模拟的Vue应用：
//index.js
//我们在webpack.config.js中进行了配置，所以这里优先在当前目录下寻找vue文件，也就是我们的vue/index.js文件
importVuefromvue;
letvm=newVue({
el:#app,
data(){
return{
title:学生列表,
classNum:1,
teacher:[张三,李四],
info:{
a:{
b:1
students:[
id:1,
name:小红
id:2,
name:小明
console.log(vm);
vue/index.js文件主要是负责初始化内容
//src/sindex.js
import{initState}from./init;
functionVue(options){
this._init(options);
Vtotype._init=function(options){
//this指向当前实例对象
varvm=this;
//我们把newVue()时候传递的数据统称为options
//并且挂载到Vue的实例对象上
vm.$options=options;
//调用initStat