vue 2.x 대상 납치 의 원리 실현

대상:손 글씨 미니 버 전 Vue
1.rollup 포장 을 사용 하여 포장 한 코드 의 부피 가 더욱 작고 프레임 소스 코드 를 작성 하 는 포장 에 더욱 적합 합 니 다.


npm i rollup -D

2.babel 관련 가방 을 설치 하고 정적 서 비 스 를 실현 하 며 환경 변 수 를 설정 하 는 가방


npm i @babel/core @babel/preset-env rollup-plugin-babel roullup-plugin-serve cross-env -D

가방

rollup(포장 도구)

@babel/core(babel 핵심 모듈 로)

@babel/preset-env(babel 은 고급 문법 을 저급 문법 으로 바 꿉 니 다)

rollup-plugin-server(정적 서비스 실현)

cross-env(환경 변수 설정)

rollup-plugin-babel(교량)

4:루트 디 렉 터 리 쓰기 rollup.config.js


import babel from 'rollup-plugin-babel';
import serve from 'rollup-plugin-serve';
export default {
 input:'./src/index.js', //             
 output:{
   file:'dist/umd/vue.js', //     
   name:'Vue', //             
   format: 'umd', //       
   sourcemap:true, // es6-> es5                    
 },
 plugins:[ //      
   babel({
     exclude:"node_modules/**"
   }),
   process.env.ENV === 'development'?serve({
     open:true,
     openPage:'/public/index.html', //     html   
     port:3000,
     contentBase:''
   }):null
 ]
}

package.josn 설정


{
 "name": "vue_souce",
 "version": "1.0.0",
 "description": "",
 "main": "index.js",
 "scripts": {
  "build:dev": "rollup -c",
  "serve": "cross-env ENV=development rollup -c -w"
 },
 "keywords": [],
 "author": "",
 "license": "ISC",
 "devDependencies": {
  "@babel/core": "^7.9.0",
  "@babel/preset-env": "^7.9.5",
  "cross-env": "^7.0.2",
  "rollup": "^2.6.1",
  "rollup-plugin-babel": "^4.4.0",
  "rollup-plugin-serve": "^1.0.1"
 }
}

5:새 index.html(public/index.html)


<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Document</title>
</head>
<body>
  <script src="/dist/umd/vue.js"></script>
  <script>
    let vm = new Vue({
      el:'#app',
      //       
      data(){
        return {
        name:'  ',
        age:11,
        address:{
          number:0,
          name:'  '
        }}
      },
    })
    vm._data.address = {a:1};
    console.log(vm._data)
  </script>
</body>
</html>

6:Vue 입구 작성:index.js


// Vue        Vue     
import {initMixin} from './init';
function Vue(options){
  //   Vue      
  this._init(options);

}
//            Vue       
initMixin(Vue); //  Vue       _init  
export default Vue

7:초기 화 작업 init.js 작성


import {initState} from './state'
//         init  
export function initMixin(Vue){
  //      
  Vue.prototype._init = function (options) {
    //      
    const vm = this; // vue    this.$options             
    vm.$options = options;

    //      
    initState(vm); //     
  }
}

8:데이터 초기 화


import {observe} from './observer/index.js'
export function initState(vm){
  const opts = vm.$options;
  // vue                    watch
  if(opts.props){
    initProps(vm);
  }
  if(opts.methods){
    initMethod(vm);
  }
  if(opts.data){
    initData(vm);
  }
  if(opts.computed){
    initComputed(vm);
  }
  if(opts.watch){
    initWatch(vm);
  }
}
function initProps(){}
function initMethod() {}
function initData(vm){
  //        
  let data = vm.$options.data; //      data
  data = vm._data = typeof data === 'function'?data.call(vm):data;
  //                        =》     
  // MVVM                
  // Object.defineProperty ()      get   set  
  observe(data); //      
}
function initComputed(){}
function initWatch(){}

9.핵심 감청 기능 쓰기


//  data        Object.defineProperty     es5
// Object.defineProperty     ie8     vue2     ie8  
import {
  isObject
} from '../util/index'
//                       __ob__
class Observer{
  constructor(value){ //          
    // vue                        ，    set get  
    //      
    this.walk(value); //        
  }
  walk(data){
    let keys = Object.keys(data); // [name,age,address]

    //     data        return
    keys.forEach((key)=>{
      defineReactive(data,key,data[key]);
    })
  }
}
function defineReactive(data,key,value){
  observe(value); //         
  Object.defineProperty(data,key,{
    configurable:true,
    enumerable:false,
    get(){ //            
      return value;
    },
    set(newValue){ //         
      if(newValue === value) return;
      observe(newValue); //           ，                
      value = newValue;
    }
  });
}

export function observe(data) {
  let isObj = isObject(data);
  if (!isObj) {
    return
  }
  return new Observer(data); //       
}

10:도구 류 파일 을 작성 하여 검사 대상 을 저장 합 니 다.


/**
 * 
 * @param {*} data          
 */
export function isObject(data) {
  return typeof data === 'object' && data !== null;
}

요약:
1.Vue 구조 함 수 를 만 들 고 모든 매개 변수 options 를 받 습 니 다.
2 분류 초기 화 options,이 장 에 서 는 data 를 처리 합 니 다.data 의 참조 형식의 데 이 터 를 Object.definePrototy 를 통 해 응답 식 으로 초기 화 합 니 다.초기 화 는 순서 가 있 습 니 다.props 를 초기 화 한 다음 method 를 초기 화 한 다음 data computed watch 를 초기 화 합 니 다.
3.핵심 은 다음 과 같다.


function defineReactive(data,key,value){
  observe(value); //         
  Object.defineProperty(data,key,{
    configurable:true,
    enumerable:false,
    get(){ //            
      return value;
    },
    set(newValue){ //         
      if(newValue === value) return;
      observe(newValue); //           ，                
      value = newValue;
    }
  });
}

vue 2.x 대상 납치 의 원리 실현 에 관 한 이 글 은 여기까지 소개 되 었 습 니 다.vue 2.x 대상 납치 에 관 한 더 많은 내용 은 우리 의 이전 글 을 검색 하거나 아래 의 관련 글 을 계속 찾 아 보 세 요.앞으로 많은 응원 바 랍 니 다!

이 내용에 흥미가 있습니까?

현재 기사가 여러분의 문제를 해결하지 못하는 경우 AI 엔진은 머신러닝 분석(스마트 모델이 방금 만들어져 부정확한 경우가 있을 수 있음)을 통해 가장 유사한 기사를 추천합니다:

vue 2.x 대상 납치 의 원리 실현

1.rollup 포장 을 사용 하여 포장 한 코드 의 부피 가 더욱 작고 프레임 소스 코드 를 작성 하 는 포장 에 더욱 적합 합 니 다. @babel/preset-env(babel 은 고급 문법 을 저급 문법 으로...

텍스트를 자유롭게 공유하거나 복사할 수 있습니다.하지만 이 문서의 URL은 참조 URL로 남겨 두십시오.

CC BY-SA 2.5, CC BY-SA 3.0 및 CC BY-SA 4.0에 따라 라이센스가 부여됩니다.

vue 2.x 대상 납치 의 원리 실현

좋은 웹페이지 즐겨찾기