原创力文档- 1、本文档共8页，可阅读全部内容。
- 2、原创力文档（book118）网站文档一经付费（服务费），不意味着购买了该文档的版权，仅供个人/单位学习、研究之用，不得用于商业用途，未经授权，严禁复制、发行、汇编、翻译或者网络传播等，侵权必究。
- 3、本站所有内容均由合作方或网友上传，本站不对文档的完整性、权威性及其观点立场正确性做任何保证或承诺！文档内容仅供研究参考，付费前请自行鉴别。如您付费，意味着您自己接受本站规则且自行承担风险，本站不退款、不进行额外附加服务；查看《如何避免下载的几个坑》。如果您已付费下载过本站文档，您可以点击 这里二次下载。
- 4、如文档侵犯商业秘密、侵犯著作权、侵犯人身权等，请点击“版权申诉”（推荐），也可以打举报电话：400-050-0827(电话支持时间：9:00-18:30)。
第
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
文档评论（0）