vue的创建

1.vue create 项目名称

2.npm run serve  (启动项目)

vue

Vue (读音 /vjuː/，类似于 view) 是一套用于构建用户界面的渐进式框架。与其它大型框架不同的是，Vue 被设计为可以自底向上逐层应用。

Vue 的核心库只关注视图层，不仅易于上手，还便于与第三方库或既有项目整合。另一方面，当与现代化的工具链以及各种支持类库结合使用时，Vue 也完全能够为复杂的单页应用提供驱动。

提高开发效率，帮助减少不必要的dom操作；双向数据绑定，通过框架提供的指令，前端只需要关注业务逻辑，不再关心dom如何渲染。

MVVM模式

mvc

MVC是包括view视图层、controller控制层、model数据层。各部分之间的通信都是单向的。

1.View视图层传达指令到Controller控制层，2.Controllre完成业务逻辑后，要求Model数据层改变状态，3.Model将新的数据发到View，用户得到反馈

mvvm

MVVM包括view视图层、model数据层、viewmodel层。VM是其中核心，M和V间的调度者。各部分通信都是双向的。

V：每个页面的html结构。

M：保存的是每个页面中单独的数据（比如要渲染页面表格，ajax请求到后台的你个数组，此数据即为M）。

VM：一个调度者，分割了M和V，M和V不直接关联，通过中间的VM。V想要保存数据到M，都要有VM做中间处理；V想要渲染页面，需要调用VM，VM从M中取数据。

采用双向数据绑定，View的变动，自动反映在 ViewModel，反之亦然。其中ViewModel层，就是View和Model层的粘合剂

•  之间的通信是双向的。

• View 与 Model 不发生联系，都通过 vm 传递。

• 采用双向数据绑定

 组件化

组件系统是 Vue 的另一个重要概念，因为它是一种抽象，允许我们使用小型、独立和通常可复用的组件构建大型应用。仔细想想，几乎任意类型的应用界面都可以抽象为一个组件树：

安装和使用

<script src="https://unpkg.com/vue@next"></script>
<div id="app"></div>
    <script>
        var app = {
            data:function(){
                return{
                    name:'zhangsan',
                }
            },
            template:"<div>{{this.name}}</div>",
        } 
        Vue.createApp(app).mount('#app');
    </script>

node中（自己搭建一个vue项目）

如何在node中新建一个应用，搭建服务，通过浏览器访问

1.初始化项目

npm init

2.安装vue

# 最新稳定版

$ npm install -S vue@next

# 安装编译工具

$ npm install -D @vue/compiler-sfc

3.创建src文件夹

创建入口文件src/main.js

import { createApp } from 'vue'

import App from './App.vue'

createApp(App).mount('#app')

创建根组件src/App.js

4.安装cli-server

#npm i -D @vue/cli-service

5.配置package.json

"scripts": {

    "serve": "vue-cli-service serve",

},

为什么要把data对象变成函数并return

组件是一个可复用的实例，当你引用一个组件的时候，组件里的data是一个普通的对象，所有用到这个组件的都引用的同一个data，就会造成数据污染。

将data封装成函数后，在实例化组件的时候，我们只是调用了data函数生成的数据副本，避免了数据污染。

关于vue3的根节点

在3版本中，我们可以放置多个根节点，而在2版本中必须有且只有一个根节点。

生命周期

每个组件在被创建时都要经过一系列的初始化过程——例如，需要设置数据监听、编译模板、将实例挂载到 DOM 并在数据变化时更新 DOM 等。同时在这个过程中也会运行一些叫做生命周期钩子的函数，这给了用户在不同阶段添加自己的代码的机会。

vue3新增了调试用的钩子函数：

他们会检测是谁影响的vue实例的变化

renderTracked 状态跟踪

只要页面有update的情况，它就会跟踪，然后生成一个event对象，我们通过event对象来查找程序的问题所在。

renderTriggered 目标跟踪

它不会跟踪每一个值，而是给你变化值的信息，并且新值和旧值都会给你明确的展示出来。

<template>
    <div id="header">
        {{name}}
        <button @click="update">修改</button>
    </div>
    
</template>
<script>
export default {
    data(){
        return{
            name:'zhangsan'
        }
    },
    methods:{
        update(){
            this.name = 'lisi'
        }
    },
    beforeCreate(){
        console.log('实例创建前')
    },
    created(){
        console.log('实例创建好了');
    },
    beforeMount(){
        console.log('实例在挂载前')
    },
    mounted() {
        console.log('实例被挂载了')
    },
    beforeUpdate(){
        console.log('实例被修改前')
    },
    updated(){
        console.log('实例被修改后')
    },
    renderTracked(event){//监测页面变化
        console.log(event);
    },
    renderTriggered(event){//监测页面具体变化
         console.log(event);
    }
}
</script>