携手创作，共同成长！这是我参与「掘金日新计划 · 8 月更文挑战」的第1天，点击查看活动详情

初识Vue

Vue是一款构建用户界面的渐进式框架，Vue 被设计为可以自底向上逐层应用,Vue的核心是只关注视图层,不仅易于上手,还便于与第三方库或既有项目整合。

Vue的作者 尤雨溪
- 于2013年开发轻量级框架 Seed 同年12月更名为Vue 版本0.6.0
- 2014年正式对外发布 版本0.8.0

特点：组件化模式、声明式编程、虚拟DOM、Diff算法

关于声明式编程和命令式编程

个人理解：声明式编程和命令式编程的区别
- 声明式就是我和朋友一起出去玩，但是我想喝水，然后我就说我有点口渴想要喝水，然后朋友会觉得我口渴去卖一瓶水或者让我回家喝水
- 命令式还是一样，我和朋友一起出去玩，但是我想喝水，然后我直接对着朋友说，你给我去对面商店买一瓶水，我现在口渴了就要喝
网上解释：两者都是编程规范，声明式主要关注我想要什么，而不关注具体怎么实现，而命令式编程主要关注让计算机严格遵循你的指令,而不理会最后的结果是不是你所想要的。

//命令式编码
//准备html字符串
let htmlStr = '';
//遍历数据进行拼接
data.forEach( item => {
    htmlStr += `<li>${item.id} - ${item.name} - ${item.age}</li>`
});
//获取list元素
let list = document.getElementById('list');
//（亲自操作DOM）修改内容
list.innerHTML = htmlStr;

Vue虚拟DOM操作

页面初次加载：拿到数据 —》渲染到虚拟DOM上面 —》改变页面真实DOM
页面数据改变：拿到新数据 —》渲染到虚拟DOM上面 —》 1. 通过Diff算法和旧虚拟DOM进行比较 —》把对应不存在的虚拟DOM添加到存在的真实DOM后面 —》改变页面真实DOM
个人理解：
- 页面初次加载：我现在要去买房，然后我去售楼部看房(拿到数据)，先看销售给我的图像样板房(虚拟DOM)，然后我觉得他给我看的这套样板房不错，我就让他带我去实地考察(真实DOM)。
- 页面数据改变：我上次去看那个房我觉得不错我全款拿下，后面我买了一台新的冰箱(拿到新数据),因为家里之前的那个冰箱太小了(进行比较),然后我把旧冰箱搬出去，把新买的冰箱放进去(添加到真实DOM),这新冰箱真不错。~~（哈哈哈哈，要是能真的全款买房就好啦）~~

常见指令和Vue实例

常见指令

v-on 事件绑定 语法: v-on:<事件类型>="<函数名>"
v-bind 将html中属性与vue中变量进行数据单项绑定，实现数据通信 语法：v-bind:属性名="Vue变量"
v-for 重复多次渲染绑定的元素 语法：v-for='(item,index) in vue变量'
v-show 控制绑定元素显示隐藏效果，通过修改display 语法 v-show="布尔值"
v-if v-else 创建或者销毁绑定的dom元素 语法 v-if="布尔值"
v-model 实现数据双向绑定，当input输入框中内容变化时候，data中变量也会变化 语法 v-model="vue变量"
v-html 插入一段html片段相当于innerHTML 语法 v-html="vue变量"
v-text 渲染字符串，会覆盖原先的字符串 语法 v-text="vue变量"

这些的话就没给大家举例说明了，但是语法我都标注出来了，当然还有其他指令，大家可以去Vue官方文档查看

Vue实例

Vue实例通过el选择实例，也能通过Vue.$mount来选择实例(比较方便)
Vue实例 Data写法 对象式 与 函数式（需要返回一个对象）
Mustache 模板语法 {{变量名称}} 数据绑定形式是文本插槽

<div id="app">
    <!-- 插值语法 -->
    {{message}}
</div>


<script>
//Vue实例
var vm = new Vue({
    // 挂载点
    el: '#app',
    // 数据
    data: {
        // 变量
        message:"你好啊，我是Vue实例"
    },
    //方法
    methods:{},
    //计算属性
    computed:{},
    //组件
    components: {},
    //监听
    watch:{}
})
</script>

MVVM模型

M ☞ 模型 Model —》 data中的数据
V ☞ 视图 View —》 DOM页面
VM ☞ 视图模型 ViewModel —》 Vue实例对象
M —》 VM —》 V 数据通过VM中的Data Bindings绑定到DOM上面
V —》 VM —》 M DOM通过VM中的DOM Listeners监听DOM变化映射到数据上

简单来说Vue实现响应式依靠的是Object.defineProperty，它接收3个参数，第一个为对象，第二个为属性，第三个为属性的描述对象。而实现响应式原理主要依靠的就是描述对象里面的getter和setter方法监听元素被读取或者修改。大家可以简单的了解一下。

let number = 18；
let person = {
    name:'张三',
    sex:'男',
}；

Object.defineProperty(person,'age',{
    //当有人读取person的age属性时，get函数(getter)就会被调用，且返回值就是age的值
    get(){
       console.log('有人读取age属性了')；
       return number；
    },
    //当有人修改person的age属性时，set函数(setter)就会被调用，且会收到修改的具体值
    set(value){
        console.log('有人修改了age属性，且值是',value)；
        number = value；
    }
})
// console.log(Object.keys(person))；
console.log(person);

PS：借用一下尚硅谷天禹老师小破站视频的一张截图

数据代理.png

Methods + Computed

methods 定义方法
- 当以普通函数调用时This指向是Vue实例
- 当以箭头函数调用时this指向Windows
- 插值调用时，需要添加()
computed 计算属性
- 拿已有的属性去操作和计算
- 可直接使用
- 数据存在缓存中。
  - 依赖数据未改变时，直接取缓存
  - 依赖数据改变时，执行计算属性

两者区别

计算属性有缓存，需要依赖数据发生改变，才会重新进行计算。而方法没有缓存，每次调用方法都会导致重新执行
计算属性含义上也是一个数据，可以读取也可以赋值，方法含义上是一个操作，用于处理一些事情
调用方式不一样，computed的调用发生像属性一样访问，methods定义的成员必须以函数的形式调用

<body>
    <div id="app">
        <!-- 方法调用 -->
        <h2>{{getFullName()}}</h2>
        <!-- 计算属性调用 -->
        <h2>{{fullName}}</h2>
    </div>
    <script>
         const app = new Vue({
            el:"#app",
            data(){
                return {
                    firstName:"视图",
                    lastName:"模型"
                }
            },
            //二者做一样的操作
            methods:{
                //methods即使firstName与lastName没有改变，也会再次执行
                getFullName(){
                    return this.firstName + this.lastName;
                }
            },
            computed:{
                //computed计算属性有缓存，只有关联属性改变才会再次执行
                fullName(){
                    return this.firstName +this.lastName;
                }
            }
        })
    </script>
</body>

PS：请避免直接修改计算属性值和在计算属性中做异步请求或者更改DOM

Watch

用于监听数据改变时触发某些操作
全局语法 Vue实例对象.$watch('监听对象名称',{监听事件})
它一共可以定义三个属性
- immediate 默认为false，用于初始化让handler函数调用一下
- handler 定义监听数据改变时触发的事件接收两个参数 newValue 新值 oldValue 旧值
- deep 默认为false，开启深度监听，可以监听对象里面的属性发生改变
watch和computed的区别:watch可以开启异步，而computed不能开启异步

data:{
    person = {
       name:'张三',
       sex:'男',
    }
},
watch:{
  //监听某个属性的变化
  person:{
    handler(){
      console.log("person发生了改变")
    }
  }
}

个人总结

马上也要毕业了，然后就想着在复习一下Vue，接触这个专业也快三年了，中间也经历过很多事情，我不是一个很能静下心的人😭，而无论是学习还是编程，快乐的时光终究只是其中的一小部分，枯燥才是大头，甚至有想要放弃过😓。但是每当我完成一个学期项目，看到一个网站成功搭建在我面前，各种交互和动画效果、页面布局，我从中感觉到了快乐😚，慢慢的我了解到了编程的乐趣，并且快速的加入到其中。虽然现在还是只是个小菜鸟😢，但是乐在其中，嘿嘿，兄弟们加油卷起来，冲🦆冲🦆。

好啦，简单说一下，我最初写这边文章只是因为我觉得这也算是对于我学习的知识的一个输出也能和大家一起进行讨论学习，毕竟笔记做在电脑上面也没啥用就跟大家一起分享分享，当然笔记可能做的不是很好，大家不要嫌弃，这些呢是我的一下总结，我梳理了一下我认为相对而言比较重要的，要是有没有说对的地方，望大家能指点出来，谢谢大家💕🥰

Vue从入门到入土 - 初识篇