#VUE3.0和2.0的区别及项目的搭建
在2019.10.5日发布了Vue3.0预览版源码，但是预计最早需要等到 2020 年第一季度才有可能发布 3.0 正式版。
可以直接看 github源码。

标题新版VUE 3.0计划并已实现的主要架构改进和新功能：
编译器（Compiler）
使用模块化架构
优化 “Block tree”
更激进的 static tree hoisting 功能 （检测静态语法，进行提升）
支持 Source map
内置标识符前缀（又名"stripWith"）
内置整齐打印（pretty-printing）功能
移除 Source map 和标识符前缀功能后，使用 Brotli 压缩的浏览器版本精简了大约10KB
运行时（Runtime）
速度显著提升
同时支持 Composition API 和 Options API，以及 typings
基于 Proxy 实现的数据变更检测
支持 Fragments (允许组件有从多个根结点)
支持 Portals (允许在DOM的其它位置进行渲染)
支持 Suspense w/ async setup()
目前不支持IE11
List item
3.0 新加入了 TypeScript 以及 PWA 的支持
部分命令发生了变化：
下载安装 npm install -g vue@cli
删除了vue list
创建项目 vue create
启动项目 npm run serve
默认项目目录结构也发生了变化：
移除了配置文件目录，config 和 build 文件夹
移除了 static 文件夹，新增 public 文件夹，并且 index.html 移动到 public 中
在 src 文件夹中新增了 views 文件夹，用于分类 视图组件 和 公共组件
如果：你个人还是很想用之前的创建项目的方式 ，那你则需要安装 （npm install -g @vue/cli-init） 这样就可以像之前一样创建项目 eg: vue init webpack vue-program

npm install -g @vue/cli-init
vue init` 的运行效果将会跟 `vue-cli@2.x` 相同
vue init webpack my-project

项目搭建
第一步安装

npm install -g vue@cli

第二步创建项目文件

vue create project    //项目的名称

1
第三部 选择快捷式安装配置
在这里插入图片描述

这里如果你是第一次用3.0版本的话，是没有前两个的，而只有最后两个，这里是 让你选的，第一个是默认配置，一般选第二个，自己配置，这里选择最后一个
第四步选择安装依赖

当你选择后会出现上面图上的东西，这里你可以自由选择用哪些配置，按上下键 选择哪一个，按空格键确定，所有的都选择好后，按enter键进行下一步
第五步 选择css预处理

在这里插入图片描述
less和sass可以自行选择
第六步 选择自动化代码格式化检测

第七步是否保存刚才的配置，选择确定后你下次再创建新项目 就有你以前选择的配置了，不用重新再配置一遍了
第八步配置文件放哪

第一个是放在单独的文件配置
第二个是放在package.json文件
第九步是否将以上这些将此保存为未来项目的预配置

第十步 回车下载
第十一步启动项目

 npm run serve    

vue项目构建

vue是渐进式的框架，意思是你可以用script脚本引入，可以npm安装vue也可以利用官方构建工具构建一个vue工程。但是现在大部分项目都是构建工程。vue3构建方式有两种：

vue官方脚手架：

vue-cli是官方提供的项目构建脚手架，可以构架vue2和vue3，并且在构建之初可以选择自己想要的配置，非常好用。

npm install -g @vue/cli
vue create hello-world

在控制台中可以选择项目的配置，包括vue版本，是否使用ts，vuex等。非常方便。

vite：

vite是一个 web 开发构建工具，由于其原生 ES 模块导入方式，可以实现闪电般的冷服务器启动。通过在终端中运行以下命令，可以使用 Vite 快速构建 Vue 项目。
npm init vite-app
vite不可以在项目创建之初为我们提供配置，只是一个单页面，需要自己后面去构建。

二、vue目录介绍

vue.config.js简介：

https://cli.vuejs.org/zh/config/

三、vue3.0新特性

组合式API：setup

以往的vue中，代码是根据组件选项分区的。比如数据全部要定义在data下，方法全部要写在method下。
这样分区造成一个问题，如果页面功能多，会将单个逻辑分布到文件的各个地方，不方便代码阅读，而且容易造成单个文件很大，不好拆分。
vue3.0的组合式API解决了两个问题：

1. 代码根据逻辑分区，
2. 大文件的拆分。举个栗子，下图是vue2的代码分区，同样的颜色代码表他们是实现一个功能的。
   

vue3新增了setup选项。把新增两个字重点标出来是说，vue2的所有选项在vue3里是可以使用的。就是在vue3中完全使用vue2的那套写法，语法上没有任何问题。

setup选项如何工作

setup的生命周期：
新的 setup 组件选项在创建组件之前执行，一旦 props 被解析，并充当合成 API 的入口点。
读到这会有一个疑惑，因为我们知道vue2中，是要在created之后，才能操作data和method。在setup这个时间节点，应该是没有this的。那我们怎么去调用vuex做网络请求呢？
直接用是不行的，但是可以使用vuex的useStore方法获取store。所以我们完全可以在setup中做网络请求和数据初始化，如下：

<template>
  <div class="about">
    <h1>This is an about page</h1>
  </div>
</template>
<script>
import { useStore } from 'vuex'
import { computed } from 'vue'
export default {
  name: 'About',
  props: {
  },
  setup () {
    const store = useStore() // 获取store实例
    store.dispatch('getTest').then(res => {
      console.log(res)
    })
    console.log(store.state.test)
    // return { user }
  }
}
</script>

setup的输入和输出：

setup输入的是props，也就是父组件传进来的值。return的是一个对象，这个对象里面的值可以在页面的任何地方直接使用。

setup中可以做哪些操作：

vue3没有放弃之前的生命周期函数，在setup中我们依然可以调用vue2中的那些生命周期，在特定的周期做特定的事情。

为了使setup中返回的对象是响应式的，所以一般使用ref函数定义这些变量。
举个栗子：

<template>
  <div>
<!--    {{menus.hsmenu2}}-->
    <p>{{ t("menus.hsmenu2") }}</p>
    <el-input v-model="input" />
    <p>{{model.var1}}</p>
    <p>{{model.var1Value}}</p>
  </div>
</template>

<script lang="ts">
import { useI18n } from "vue-i18n";
import { defineComponent, ref } from "vue";
import model1 from './model1'
export default defineComponent({
  name: "Menu2",
  setup() {
    const { t } = useI18n();
    const model = model1()
    return {
      input: ref(""),
      t,
      model
    };
  }
});
</script>

model1：

import {ref, onMounted, computed} from 'vue'
export default function model1 () {
  const var1 = ref(1)
  const f1 = async () => {
    var1.value = 2
    console.log('do f1')
  }
  const var1Value = computed(() => {
    return var1.value + 3
  })
  onMounted(f1)
  return {
    var1,
    var1Value
  }
}

响应性实现的变化

什么是响应性：响应式即对外界的变化做出的反应的一种形式
vue2使用对象的原型链实现响应性，通过实现对象的set和get方法，在对象变化时可以进行页面刷新。局限是无法监听数组元素的变化。
vue3使用proxy代理实现响应性，用proxy对象把变量包裹，并且使 Vue 能够在 property 的值被访问或修改的情况下进行依赖跟踪和变更通知。

Teleport、片段、css变量等

teleport可以实现更改dom结构。比如把一个dom从原来的位置移到body下。作用就是可以脱离原本的dom。

<teleport to="body">
      <div v-if="modalOpen" class="modal">
        <div>
          I'm a teleported modal! 
          (My parent is "body")
          <button @click="modalOpen = false">
            Close
          </button>
        </div>
      </div>
</teleport>

其他变化

vue2中，一个vue文件只能有一个根。所有的元素都要在这个根下。导致项目的嵌套会增多，比如我们的管理系统。vue3如果不想，可以不用这样做了。
vue3的css中可以使用js的变量：

<template>
  <div class="text">hello</div>
</template>

<script>
export default {
  data() {
    return {
      color: 'red'
    }
  }
}
</script>

<style vars="{ color }">
.text {
  color: var(--color);
}
</style>

1.Template  fragments碎片

    组件可以拥有多个根节点，解决多个div嵌套问题

2.数据获取

Vue3的数据获取在反应数据（Reactive Data）中，通常包含在一个反应状态（Reactive State）变量中。(reactive的作用是将对象包装成响应式对象，通过Proxy代理后的对象。)

 响应式原理： Proxy代理拦截:reactive函数执行，会将传入的target对象通过Proxy包装，拦截它的get，set等，并将代理的target缓存。(组件在render阶段，视图会读取数据对象上的值进行渲染，此时便触发了Proxy的get，由此触发对应的track函数，记录下了对应的ReactiveEffect，也就是常说的依赖收集。)

     1).Ref与reactive区别：

        reactive 和 ref 都是用来定义响应式数据的， reactive更推荐去定义复杂的数据类型， ref 更推荐定义基本类型，ref 和 reactive 本质我们可以简单的理解为ref是对reactive的二次包装, ref定义的数据访问的时候要多一个.value。(ref定义基本数据类型,ref也可以定义数组和对象)

   2).判断数据到底是ref还是reactive?

        通过isRef / isReactive 方法，对当前数据的__v_ref来判断的，如果有这个私有的属性, 并且取值为true, 那么就代表是一个ref类型的数据

 3.响应式数据

       在Vue3.0，我们就需要使用一个新的setup()方法，此方法在组件初始化构造的时候触发。

使用以下三步来建立反应性数据:

1）从vue引入reactive

2）使用reactive()方法来声名我们的数据为反应性数据

3）使用setup()方法来返回我们的反应性数据，从而template可以获取这些反应性数据

import { reactive } from 'vue'
export default {
  props: {
    title: String
  },
  setup () {
    const state = reactive({
      username: '',
      password: ''
    })

    return { state }
  }}

这里构造的反应性数据就可以被template使用，可以通过state.username和state.password获得数据的值，需要先声名一个方法然后在setup()方法中返回(return)， 在组件内就可以调用这个方法了。

4.methods方法

       Vue3 的合成型API里面的setup()方法也是可以用来操控methods的。创建声名方法其实和声名数据状态是一样的。需要先声名一个方法然后在setup()方法中返回(return)， 这样组件内就可以调用这个方法了。

export default {
  props: {
    title: String
  },
  setup () {
    const state = reactive({
      username: '',
      password: ''
    })

    const login = () => {
      // 登陆方法    }
    return { 
      login,
      state
    }
  }}

5.生命周期钩子

       现在 Vue3 的合成型API里面的setup()方法可以包含了基本所有东西。生命周期的钩子就是其中之一！但是在 Vue3 生周期钩子不是全局可调用的了，需要另外从vue中引入，生命周期的挂载钩子叫onMounted，引入后我们就可以在setup()方法里面使用onMounted挂载的钩子了。(与2.0生命周期相似，在前面加了on，setup这个生命周期发生在beforeCreate和created之前,此时无法访问data、computed、methods、refs )

6.计算属性 - Computed Properties

       Vue3 的设计模式给予开发者们按需引入需要使用的依赖包，在 Vue3 使用计算属性，需要在组件内引入computed。使用方式就和反应性数据（reactive data）一样，在state中加入一个计算属性。(计算属性可以写在声明的响应式变量内，也可单独声明使用)

 setup () {
    const state = reactive({
      username: '',
      password: '',
      lowerCaseUsername: computed(() => state.username.toLowerCase())
    })

 const twiceTheCounter = computed(() => counter.value * 2)

7.接收 Props

       接收组件props参数传递这一块为我们带来了Vue2和Vue3之间最大的区别。在 Vue2，this代表的是当前组件，不是某一个特定的属性。所以我们可以直接使用this访问prop属性值。就比如下面的例子在挂载完成后打印处当前传入组件的参数title。在 Vue3 中，this无法直接拿到props属性，emit events（触发事件）和组件内的其他属性。不过全新的setup()方法可以接收两个参数：           1.props - 不可变的组件参数

        2.context - Vue3 暴露出来的属性（emit，slots，attrs）

setup (props,context) {
   //Context的使用(// attrs (非响应式对象，等同于 $attrs用于简介传参，slots  插槽 非响应式对象，等同于 $slots，emit触发事件方法，等同于 $emit，expose 暴露公共property 函数,将setup里的内容暴露到外部)
    onMounted(() => {
      console.log('title: ' + props.title)
    })

  一个项目使用
 <Header title="Cnode客户端" color="red" /> //父组件里的子组件
//子组件的内容
<template>
  <header :style="{
    backgroundColor: color?color:defaultColor
  }">{{title}}</header>
</template>
<script>
import { reactive } from "@vue/composition-api";
export default {
  // 父组件传递进来更改该头部组件的属性值
  props: {
    // 标题
    title: String,
    // 颜色
    color: String
  },
  setup() {
    const state = reactive({
      defaultColor: "red"
    });
    return {
      ...state
    };
  }
};
</script>

8.模板引用

为了获得对模板内元素或组件实例的引用，一样声明 ref 并从 setup() 返回：

<template> 
  <div ref="root">This is a root element</div></template>
<script>
  import { ref, onMounted } from 'vue'
  export default {
    setup() {
      const root = ref(null)
      onMounted(() => {
        // DOM 元素将在初始渲染后分配给 ref
        console.log(root.value) // <div>This is a root element</div>
      })
      return {
        root }
}}
</script>

       这里在渲染上下文中暴露root，并通过ref=”root”,将其绑定到div作为其ref。(在虚拟dom补丁算法中，若Vnode的ref键对应于渲染上下文中的 ref，则 VNode 的相应元素或组件实例将被分配给该 ref 的值。这是在虚拟 DOM 挂载/打补丁过程中执行的，因此模板引用只会在初始渲染之后获得赋值，即在onMounted生命周期中)

9.watch监听

   使用从 Vue 导入的 watch 函数执行相同的操作。它接受 3 个参数：

1. 一个想要侦听的响应式引用或 getter 函数
2. 一个回调
3. 可选的配置选项

import {  watch } from 'vue'
//一个变量
const counter = ref(0)
//监听函数 watch(监听的值,回调,可选的配置选项)
watch(counter, (newValue, oldValue) => {
  console.log('The new counter value is: ' + counter.value)
})

注意：侦听模板引用的变更可以替代前面例子中演示使用的生命周期钩子。

但与生命周期钩子的一个关键区别是watch() 和 watchEffect()在 DOM 挂载或更新之前运行副作用，所以当侦听器运行时，模板引用还未被更新。因此，使用模板引用的侦听器应该用 flush: 'post' 选项来定义，这将在 DOM 更新后运行，确保模板引用与 DOM 保持同步。

watchEffect(() => {
        console.log(root.value) // => <div>This is a root element</div>
      }, 
      {
        flush: 'post'
      })

 10.Mixin

        简述：Mixin 提供了一种非常灵活的方式，来分发 Vue 组件中的可复用功能。一个 mixin 对象可以包含任意组件选项。当组件使用 mixin 对象时，所有 mixin 对象的选项将被“混合”进入该组件本身的选项。

       局部mixins的配置：

  export const mixin1 = {
	methods: {
		showName(){
			alert('第一个mixin')
		}
	},
	mounted() {
		console.log('你好啊！')
	},}
export const mixin2 = {
	data() {
		return {
			sum:100
		}
	},
   methods: {
		showName(){
			alert('第二个mixin')
		}
	},
}
<script>
	import {mixin1，mixin2} from '../mixin'

	export default {
		name:'Student',
		data() {
			return {
				name:'张三',
				
			}
		},
		mixins:[mixin1，mixin2]
	}
</script>

 全局注册：全局mixins 对vm，和所有vm均进行mixins

//引入Vue
import Vue from 'vue'
//引入App
import App from './App.vue'
import {mixin1，mixin2} from '../mixin'
//关闭Vue的生产提示
Vue.config.productionTip = false
Vue.mixin(mixin1)
Vue.mixin(mixin2)
//创建vm
new Vue({
	el:'#app',
	render: h => h(App)
})

 11.自定义组件

       除了核心功能默认内置的指令 (例如 v-model 和 v-show)，Vue 也允许注册自定义指令。注意，在 Vue 中，代码复用和抽象的主要形式是组件。然而，有的情况下，你仍然需要对普通 DOM 元素进行底层操作，这时候就会用到自定义指令。

       举个聚焦输入框的例子，如下：

//全局注册
const app = Vue.createApp({})// 注册一个全局自定义指令 `v-focus`
app.directive('focus', {
  // 当被绑定的元素挂载到 DOM 中时……
  mounted(el) {
    // 聚焦元素
    el.focus()
  }})
注册局部指令：
directives: {
  focus: {
    // 指令的定义
    mounted(el) {
      el.focus()
    }
  }}

注册局部指令：
directives: {
  focus: {
    // 指令的定义
    mounted(el) {
      el.focus()
    }
  }}
  使用方式：<input v-focus />
使用方式 <input v-focus />

12. 路由变化

 传参和原来一样，取参发生改变：

Params传参：
<router-link to="/home/111">点击跳转到home页面并传参</router-link>
 vue3.0中import { useRoute } from 'vue-router'
    const route = useRoute()
console.log(route.params.id);//111
query传参：
 <router-link to="/test?id=999">test</router-link>
    //接受的时候
  import { useRoute } from 'vue-router'
    const route = useRoute()
    console.log(route.query.id);//999
Js传参方式:
import { useRouter } from 'vue-router'
    const route = useRouter()
            route.push({
                path:"/lianxi",
                query:{
                    id:666
                }
            });
             route.push({
                name:'lianxi',
                params:{
                    id:666
                }
            });
   import { useRoute } from 'vue-router'
    const route = useRoute()
    console.log(route.query.id);//999

13.总结

       现在基本都看到vue2与vue3其实概念与理念都是一样的。只是有一些属性获取方式和声名和定义方式稍微变了。总结一下，我觉得 Vue3 给我们前端开发者带来了全新的开发体验，更好的使用弹性，可控度也得到了大大的提升。全新的合成式API（Composition API）可以提升代码的解耦程度 —— 特别是大型的前端应用，效果会更加明显。还有就是按需引用的有了更细微的可控性，让项目的性能和打包大小有更好的控制。

案例项目代码整理：

<template>
  <div class='form-element'>
    <h2> {{ state.title }} </h2>
    <input type='text' v-model='state.username' placeholder='Username' />
    
    <input type='password' v-model='state.password' placeholder='Password' />

    <button @click='login'>
      Submit
    </button>
    <p> 
      Values: {{ state.username + ' ' + state.password }}
    </p>
  </div></template>
<script>
import { reactive, onMounted, computed } from 'vue'
export default {
  props: {
    title: String
  },
//方法在组件初始化构造的时候触发，可以直接使用vue3的反应api，返回我们的反应性数据，从而template可以获取这些反应性数据
 //setup()方法可以接收两个参数：
   //props - 不可变的组件参数
//context - Vue3 暴露出来的属性（emit，slots，attrs）

 //props接收传的参数，emit是事件触发
   setup(props, { emit }) {
//reactive是反应数据是包含在一个反应状态（reactive state）变量中
    const state = reactive({
      username: '',
      password: '',
     //计算属性：在state中加入一个计算属性:
      lowerCaseUsername: computed(() => state.username.toLowerCase())
    })

    onMounted(() => {
      console.log('title: ' + props.title)
    })
//先声名一个方法然后在setup()方法中返回(return)
    const login = () => {
      emit('login', {
        username: state.username,
        password: state.password
      })
    }

    return { 
      login,
      state
    }
  }}</script>