手摸手，一起从0到1走进vue的世界（一）

栏目: 编程语言 · 发布时间: 6年前

内容简介：相信进来的小伙伴都对vue有一定的了解或者使用，毕竟现在前端最火的框架之一，vue是最好学的和入门相对简单，毕竟是中文吧，亲切感倍增，鄙人呢，现在的工作用的主要框架也是vue，平时喜欢追根溯源，最近身边很多小伙伴去面试或者做面试官，反馈的某某大佬，写代码棒棒的，但在原理和使用场景方面不够透彻，所以在这里就总结一些大家平时不留意的点，vue(读音/u：/，类似于vew)是一套用于构建用户界面的渐进式框架。特点：易用，灵活，高效渐进式框架；逐一递增库是将代码集合成一个产品库是我们调用库中的方法实现自己的功

写在前面

相信进来的小伙伴都对vue有一定的了解或者使用，毕竟现在前端最火的框架之一，vue是最好学的和入门相对简单，毕竟是中文吧，亲切感倍增，鄙人呢，现在的工作用的主要框架也是vue，平时喜欢追根溯源，最近身边很多小伙伴去面试或者做面试官，反馈的某某大佬，写代码棒棒的，但在原理和使用场景方面不够透彻，所以在这里就总结一些大家平时不留意的点， 从vue入门到源码小实现 ，写来旨在和大家一起交流。

从0开始

什么是vue?

vue(读音/u：/，类似于vew)是一套用于构建用户界面的渐进式框架。特点：易用，灵活，高效渐进式框架；逐一递增 vue+ components+vue-router+vuex+vue-cli

什么是库，什么是框架?

库是将代码集合成一个产品库是我们调用库中的方法实现自己的功能。（比如大家熟悉的jquery，就是库。）框架则是为解决一类问题而开发的产品框架是我们在指定的位置编写好代码，框架帮我们调用。（vue、react、ng）总而言之，框架是库的升级版 plus。

//...引入库等
let vm = new Vue({
            el:'#app',
            //template: '<h1>hello world</h1>',
            data:{ // 存放数据
                msg:'hello',
                info:{xxx:'xxx'},
                arr:[1,2,3,4]
            }
        });

vm.$nextTick(()=>{
            console.log(vm.$el.innerHTML); 
            console.log(vm.$options); 
        });
        vm.$watch('info.xxx',function(newValue,oldValue){
            console.log(newValue,oldValue);
        })
复制代码

vue实例上的方法 vm. options nextTick 等等

当然你可以在控制台上面打印

mvvm

在传统的mvc中除了mode和vew以外的逻辑都放在了 controller中，导致 controller逻辑复杂难以维护，在mwm中vew和 mode没有直接的关系，全部通过 vIewMode进行交互

方便大家加深印象百度一张图片：

模板语法

允许开发者声明式地将DOM绑定至底层vue实例的数据。在使用数据前需要先声明编写三元表达式 JavaScript表达式

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>Document</title>
</head>
<body>
    <div id="app">
        <!-- 取值表达式  可以 运算  , 取值 ， 做三元 -->
        {{1+1}} 
        {{msg}}
        {{flag?'ok':'no'}}
        {{ {name:1} }}
        {{ 'msg' + 'hello'}}
    </div>
    <script src="node_modules/vue/dist/vue.js"></script>
    <script>
        let vm = new Vue({
            el:'#app',
            data:{
                msg:'hello',
                flag:true
            }
        });
        
    </script>
</body>
</html>
复制代码

划重点-△观察数据变化

vue 数据劫持，必须要知道Object.defineProperty，以下是代码简单实现

// 数据源
let obj = {
    name:'jw',
    age: {
        age:18
    }
}
function observer(obj){
    if(typeof obj == 'object'){
        for(let key in obj){
            defineReactive(obj,key,obj[key]);
        }
    }
}
function defineReactive(obj,key,value){
    observer(value); // 判断value是不是一个对象 如果是对象 会继续监控
    Object.defineProperty(obj,key,{
        get(){
            return value
        },
        set(val){
            observer(val); // 如果设置的值是对象 需要在进行这个对象的监控
            console.log('数据更新了')
            value = val;
        }
    })
}
observer(obj);
obj.age = {name:1};
复制代码

Object.defienProperty 不支持数组的，当然有童鞋就会问，那如果是数组呢，

// vue 把 这个数组上的所有方法 都重写了
let arr = ['push','slice','shifit','unshift']
arr.forEach(method=>{
    let oldPush = Array.prototype[method];
    Array.prototype[method] = function(value){
        console.log('数据更新了')
        oldPush.call(this,value);
    }
})

obj.age.push(5);
obj.age.length--;
复制代码

如果属性不存在默认后增加的内容并不会刷新视图

数组调用push 是无效的

vue指令 v-

在vue中 Directives)是带有v-前缀的特殊特性，主要的功能就是操作DOM, 多的不说，上代码说明

<div id="app">
       <!-- 内部会进行缓存 以后使用的都是缓存里的结果 -->
      <div v-once>{{msg}}</div>
      <!-- v-html  innerHTML XSS攻击  不能将用户输入的内容展现出来 内容必须是可信任的-->
      <div v-html="d"></div>
       <!-- v-if 如果不成里 dom就会消失 -->
       <!-- v-if 控制的是 dom 有没有 v-show控制的是样式   -->
       <!-- v-show不支持template -->
       <template v-show="flag">
           <div>hello</div>
           <div >123</div>
       </template>
      <div>312</div>
   </div>
复制代码

v-for记得写key，提高渲染效率，后面说的diff算法的时候会详细说，key可以用来区分元素，尽量不要使用index做为key 如果有唯一标示尽量使用唯一标示哦，有点需要注意的，就是template循环的时候key放在子元素上面，vue 2.5 以上要求必须在循环时使用key属性。

<template v-for="i in 3" >
   <div :key="i+'_1'" :a="i+'_1'">{{i}}</div>
   <div :key="`${i}_2`" :a="`${i}_2`" a="{{i}}">{{i}}</div>
</template>
复制代码

v-model实现一个输入框双向绑定只需要

<input type="text" v-model="msg">
复制代码

其实v-model 是 @input + :value 的一个语法糖

<input type="text" :value="msg" @input="e=>msg=e.target.value">
复制代码

计算属性 computed

小面试题：

computed 和 method的区别

computed有缓存，method没有

computed 和 watch 区别

watch可以支持异步
watch 可以实现一些简单的功能先去想能不能用计算属性computed实现

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>Document</title>
</head>
<body>
    <div id="app">
        {{ fullName }} 
        {{msg}}
    </div>
    <script src="./node_modules/vue/dist/vue.js"></script>
    <script>
         let vm = new Vue({
             el:'#app',
             data:{
                 firstName:'大',
                 lastName:'飞',
                 msg:'hello',
                 fullName:''
             },
            //  mounted(){ // 顺便说下，在不同的阶段会被调用 是钩子函数
            //     this.getFullName();
            //  },
             methods:{
                getFullName(){
                    this.fullName = this.firstName + this.lastName
                }
             },
             watch:{ // vm.$watch('firstname',()=>{})
                firstName:{
                    handler(newValue){
                        setTimeout(()=>{
                            this.getFullName();
                        },1000)
                    },
                    immediate:true // deep:true
                },
                lastName(){
                    this.getFullName();
                }
             },
             computed:{ // Object.defineProperty来实现
                fullName(){ // get方法,有缓存 如果值没有更改会从缓存中取值
                    return this.firstName + this.lastName
                }
             },
            //  methods:{
            //      getFullName(){
            //          console.log('哈哈')
            //          return this.firstName + this.lastName
            //      }
            //  }
         })
    </script>
</body>
</html>
复制代码

computed用法深入一点点，相信大家平时都会有做多选框，大家的方法估计是都是用methods来实现，可以尝试用computed，代码更少更优雅。

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>Document</title>
</head>
<body>
    <div id="app">
        全选 <input type="checkbox" v-model="checkAll">

        <input type="checkbox" v-for="(item,key) in checks" v-model="item.value" :key="key">

    </div>
    <script src="./node_modules/vue/dist/vue.js"></script>
    <script>
         let vm = new Vue({
             el:'#app',
             data:{
                 checks:[{value:true},{value:false},{value:true}],
             },
             computed:{
                 checkAll:{
                     get(){
                        return this.checks.every(check=>check.value)
                     },
                     set(value){ // 双向绑定数据
                        this.checks.forEach(check =>check.value = value);
                     }
                 }
             }
         })
    </script>
</body>
</html>
复制代码

今晚先写到这里，有空再继续更新自定义指令，生命周期，router、vuex，基本的坑点讲完后，我们再看看她们简单实现的小原理。感谢你，能够看到这里。 See you ！

以上就是本文的全部内容，希望对大家的学习有所帮助，也希望大家多多支持码农网

查看所有标签

猜你喜欢:

本站部分资源来源于网络，本站转载出于传递更多信息之目的，版权归原作者或者来源机构所有，如转载稿涉及版权问题，请联系我们。

码农书籍

Python机器学习

[美] Michael Bowles / 沙嬴、李鹏 / 人民邮电出版社 / 2016-12 / 69.00元

在学习和研究机器学习的时候，面临令人眼花缭乱的算法，机器学习新手往往会不知所措。本书从算法和Python 语言实现的角度，帮助读者认识机器学习。书专注于两类核心的“算法族”，即惩罚线性回归和集成方法，并通过代码实例来展示所讨论的算法的使用原则。全书共分为7 章，详细讨论了预测模型的两类核心算法、预测模型的构建、惩罚线性回归和集成方法的具体应用和实现。本书主要针对想提......一起来看看《Python机器学习》这本书的介绍吧!

码农工具