Vue3基础小结

# 一、vue环境搭建

# 安装Vue官方脚手架以及创建项目

注意: 安装脚手架创建项目之前之前，我们的电脑上必须得安装Nodejs，推荐安装nodejs稳定版本

文档地址： https://v3.vuejs.org/guide/installation.html#cli

Vite地址： https://github.com/vitejs/vite

通过Vue-cli脚手架工具可以让我们快速的搭建vue项目，目前Vue官方给我们提供了2个脚手架，Vue-cli和Vite。

# 通过Vue-cli创建我们的项目

yarn global add @vue/cli
# OR
npm install -g @vue/cli
# OR
cnpm install -g @vue/cli

@前端进阶之旅: 代码已经复制到剪贴板

如果电脑上面没有安装过cnpm可以通过下面命令安装：

npm install -g cnpm --registry=https://registry.npm.taobao.org

@前端进阶之旅: 代码已经复制到剪贴板

如果电脑上面没有安装过yarn可以通过下面命令安装：

npm i -g yarn

@前端进阶之旅: 代码已经复制到剪贴板

创建项目

vue create hello-vue3

yarn serve

@前端进阶之旅: 代码已经复制到剪贴板

# 通过Vite脚手架创建我们的项目

1. 使用npm创建

npm init vite-app <project-name>
cd <project-name>
npm install
npm run dev

@前端进阶之旅: 代码已经复制到剪贴板

2. 使用yarn创建

yarn create vite-app <project-name>
cd <project-name>
yarn
yarn dev

@前端进阶之旅: 代码已经复制到剪贴板

# 目录结构

# 开发工具以及插件配置

# 二、父组件给子组件传值、Props验证、单向数据流

# 父子组件介绍

# 父组件给子组件传值

# 父组件调用子组件的时候传值

<template>
    <v-header :title="title"></v-header>
</template>

<script>
import Header from './Header'
export default {
    data() {
        return {
            title: "首页组件title"
        }
    },  
    components: {
        "v-header": Header
    }
}
</script>

@前端进阶之旅: 代码已经复制到剪贴板

# 子组件接收父组件传值

<template>
    <header>{{title}}</header>
</template>

<script>
export default {
    props: ["title"]
}
</script>

@前端进阶之旅: 代码已经复制到剪贴板

# Props验证

我们可以为组件的 prop 指定验证要求，例如你知道的这些类型。如果有一个需求没有被满足，则 Vue 会在浏览器控制台中警告你。这在开发一个会被别人用到的组件时尤其有帮助

props验证：

 props: {
    // 基础的类型检查 (`null` 和 `undefined` 会通过任何类型验证)
    propA: Number,
    // 多个可能的类型
    propB: [String, Number],
    // 必填的字符串
    propC: {
      type: String,
      required: true
    },
    // 带有默认值的数字
    propD: {
      type: Number,
      default: 100
    },
    // 带有默认值的对象
    propE: {
      type: Object,
      // 对象或数组默认值必须从一个工厂函数获取
      default: function() {
        return { message: 'hello' }
      }
    },
    // 自定义验证函数
    propF: {
      validator: function(value) {
        // 这个值必须匹配下列字符串中的一个
        return ['success', 'warning', 'danger'].indexOf(value) !== -1
      }
    },
    // 具有默认值的函数
    propG: {
      type: Function,
      // 与对象或数组默认值不同，这不是一个工厂函数 —— 这是一个用作默认值的函数
      default: function() {
        return 'Default function'
      }
    }

@前端进阶之旅: 代码已经复制到剪贴板

# 单向数据流

所有的 prop 都使得其父子 prop 之间形成了一个单向下行绑定：父级 prop 的更新会向下流动到子组件中，但是反过来则不行。这样会防止从子组件意外变更父级组件的状态，从而导致你的应用的数据流向难以理解。

另外，每次父级组件发生变更时，子组件中所有的 prop 都将会刷新为最新的值。这意味着你不应该在一个子组件内部改变 prop。如果你这样做了，Vue 会在浏览器的控制台中发出警告。

# 父组件主动获取子组件的数据和执行子组件方法

# 调用子组件的时候定义一个ref

 <v-header ref="header"></v-header>

@前端进阶之旅: 代码已经复制到剪贴板

# 父组件主动获取子组件数据

this.$refs.header.属性

@前端进阶之旅: 代码已经复制到剪贴板

# 父组件主动执行子组件方法

this.$refs.header.方法

@前端进阶之旅: 代码已经复制到剪贴板

# 子组件主动获取父组件的数据和执行父组件方法

# 子组件主动获取父组件的数据

 this.$parent.数据

@前端进阶之旅: 代码已经复制到剪贴板

# 子组件主动获取父组件的数据

this.$parent.方法

@前端进阶之旅: 代码已经复制到剪贴板

# 三、组件的生命周期函数、 this.$nextTick、动态组件 keep-alive

# 生命周期函数

Vue2	Vue3
beforeCreate	❌setup(替代)
created	❌setup(替代)
beforeMount	onBeforeMount
mounted	onMounted
beforeUpdate	onBeforeUpdate
updated	onUpdated
beforeDestroy	onBeforeUnmount
destroyed	onUnmounted
errorCaptured	onErrorCaptured
-	🎉onRenderTracked
-	🎉onRenderTriggered

setup中调用生命周期钩子

import { onBeforeMount,onMounted } from "vue";
export default {
  setup() {
    onBeforeMount(() => {
        console.log('Before Mount!')
    }) 
    onMounted(() => {
        console.log('Before Mount!')
    }) 
  },
};

@前端进阶之旅: 代码已经复制到剪贴板

# 动态组件 keep-alive

当在这些组件之间切换的时候，你有时会想保持这些组件的状态，以避免反复重渲染导致的性能问题，这个时候就用用keep-alive
在不同路由切换的时候想保持组件的状态也可以使用keep-alive

<keep-alive>
       <life-cycle v-if="isShow"></life-cycle>
  </keep-alive>

@前端进阶之旅: 代码已经复制到剪贴板

# this.$nextTick

Vue中可以把获取Dom节点的代码放在mounted里面，但是如果要在渲染完成数据后获取DOM节点就需要用到this.$nextTick

 mounted() {
      this.$nextTick(function () {
        // 仅在渲染整个视图之后运行的代码
      })
 },

@前端进阶之旅: 代码已经复制到剪贴板

 mounted() {
       
        var oDiv1 = document.querySelector("#msg");
        console.log("1-" + oDiv1.innerHTML);
        this.msg = "$nextTick演示";
        var oDiv2 = document.querySelector("#msg");
        console.log("2-" + oDiv2.innerHTML);
        this.$nextTick(() => {
            // 仅在渲染整个视图之后运行的代码
            var oDiv3 = document.querySelector("#msg");
            console.log("3-" + oDiv3.innerHTML);
        })
    },

@前端进阶之旅: 代码已经复制到剪贴板

# 四、Mixin实现组件功能的复用

# mixin介绍使用

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

# 新建mixin/base.js

const baseMixin = {
    data() {
       return{
            apiDomain: "http://www.itying.com"
       }
       
    },
    methods: {
        success() {
            console.log('succss')
        },
        error() {
            console.error('error')
        }
    }
}

export default baseMixin;

@前端进阶之旅: 代码已经复制到剪贴板

# 使用mixin

<template>
<div>
    首页模板--{{apiDomain}}
</div>
</template>

<script>
import BaseMixin from '../mixin/base'
export default {
    mixins: [BaseMixin],
    data() {
        return {

        }
    }
}
</script>

@前端进阶之旅: 代码已经复制到剪贴板

# 关于Mixin的选项合并

当组件和混入对象含有同名选项时，这些选项将以恰当的方式进行“合并”

1. 数据对象在内部会进行递归合并，并在发生冲突时以组件数据优先

const myMixin = {
  data() {
    return {
      message: 'hello',
      foo: 'abc'
    }
  }
}

const app = Vue.createApp({
  mixins: [myMixin],
  data() {
    return {
      message: 'goodbye',
      bar: 'def'
    }
  },
  created() {
    console.log(this.$data) // => { message: "goodbye", foo: "abc", bar: "def" }
  }
})

@前端进阶之旅: 代码已经复制到剪贴板

2. 同名钩子函数将合并为一个数组，因此都将被调用。另外，混入对象的钩子将在组件自身钩子之前调用

const myMixin = {
  created() {
    console.log('mixin hook called')
  }
}

const app = Vue.createApp({
  mixins: [myMixin],
  created() {
    console.log('component hook called')
  }
})

// => "混入对象的钩子被调用"
// => "组件钩子被调用"

@前端进阶之旅: 代码已经复制到剪贴板

# 全局配置Mixin

你还可以为 Vue 应用程序全局应用 mixin

# Teleport

Modal.vue

# 一、vue环境搭建

# 安装Vue官方脚手架以及创建项目

注意: 安装脚手架创建项目之前之前，我们的电脑上必须得安装Nodejs，推荐安装nodejs稳定版本

文档地址： https://v3.vuejs.org/guide/installation.html#cli

Vue-cli地址： https://cli.vuejs.org/

Vite地址： https://github.com/vitejs/vite

通过Vue-cli脚手架工具可以让我们快速的搭建vue项目，目前Vue官方给我们提供了2个脚手架，Vue-cli和Vite。

# 通过Vue-cli创建我们的项目

yarn global add @vue/cli
# OR
npm install -g @vue/cli
# OR
cnpm install -g @vue/cli

@前端进阶之旅: 代码已经复制到剪贴板

如果电脑上面没有安装过cnpm可以通过下面命令安装：

npm install -g cnpm --registry=https://registry.npm.taobao.org

@前端进阶之旅: 代码已经复制到剪贴板

如果电脑上面没有安装过yarn可以通过下面命令安装：

npm i -g yarn

@前端进阶之旅: 代码已经复制到剪贴板

创建项目

vue create hello-vue3

yarn serve

@前端进阶之旅: 代码已经复制到剪贴板

# 通过Vite脚手架创建我们的项目

1. 使用npm创建

npm init vite-app <project-name>
cd <project-name>
npm install
npm run dev

@前端进阶之旅: 代码已经复制到剪贴板

2. 使用yarn创建

yarn create vite-app <project-name>
cd <project-name>
yarn
yarn dev

@前端进阶之旅: 代码已经复制到剪贴板

# 目录结构

# 开发工具以及插件配置

# 二、父组件给子组件传值、Props验证、单向数据流

# 父子组件介绍

# 父组件给子组件传值

# 父组件调用子组件的时候传值

<template>
    <v-header :title="title"></v-header>
</template>

<script>
import Header from './Header'
export default {
    data() {
        return {
            title: "首页组件title"
        }
    },  
    components: {
        "v-header": Header
    }
}
</script>

@前端进阶之旅: 代码已经复制到剪贴板

# 子组件接收父组件传值

<template>
    <header>{{title}}</header>
</template>

<script>
export default {
    props: ["title"]
}
</script>

@前端进阶之旅: 代码已经复制到剪贴板

# Props验证

我们可以为组件的 prop 指定验证要求，例如你知道的这些类型。如果有一个需求没有被满足，则 Vue 会在浏览器控制台中警告你。这在开发一个会被别人用到的组件时尤其有帮助

props验证：

 props: {
    // 基础的类型检查 (`null` 和 `undefined` 会通过任何类型验证)
    propA: Number,
    // 多个可能的类型
    propB: [String, Number],
    // 必填的字符串
    propC: {
      type: String,
      required: true
    },
    // 带有默认值的数字
    propD: {
      type: Number,
      default: 100
    },
    // 带有默认值的对象
    propE: {
      type: Object,
      // 对象或数组默认值必须从一个工厂函数获取
      default: function() {
        return { message: 'hello' }
      }
    },
    // 自定义验证函数
    propF: {
      validator: function(value) {
        // 这个值必须匹配下列字符串中的一个
        return ['success', 'warning', 'danger'].indexOf(value) !== -1
      }
    },
    // 具有默认值的函数
    propG: {
      type: Function,
      // 与对象或数组默认值不同，这不是一个工厂函数 —— 这是一个用作默认值的函数
      default: function() {
        return 'Default function'
      }
    }

@前端进阶之旅: 代码已经复制到剪贴板

# 单向数据流

# 父组件主动获取子组件的数据和执行子组件方法

# 调用子组件的时候定义一个ref

 <v-header ref="header"></v-header>

@前端进阶之旅: 代码已经复制到剪贴板

# 父组件主动获取子组件数据

this.$refs.header.属性

@前端进阶之旅: 代码已经复制到剪贴板

# 父组件主动执行子组件方法

this.$refs.header.方法

@前端进阶之旅: 代码已经复制到剪贴板

# 子组件主动获取父组件的数据和执行父组件方法

# 子组件主动获取父组件的数据

 this.$parent.数据

@前端进阶之旅: 代码已经复制到剪贴板

# 子组件主动获取父组件的数据

this.$parent.方法

@前端进阶之旅: 代码已经复制到剪贴板

# 三、组件的生命周期函数、 this.$nextTick、动态组件 keep-alive

# 生命周期函数

Vue2	Vue3
beforeCreate	❌setup(替代)
created	❌setup(替代)
beforeMount	onBeforeMount
mounted	onMounted
beforeUpdate	onBeforeUpdate
updated	onUpdated
beforeDestroy	onBeforeUnmount
destroyed	onUnmounted
errorCaptured	onErrorCaptured
-	🎉onRenderTracked
-	🎉onRenderTriggered

setup中调用生命周期钩子

import { onBeforeMount,onMounted } from "vue";
export default {
  setup() {
    onBeforeMount(() => {
        console.log('Before Mount!')
    }) 
    onMounted(() => {
        console.log('Before Mount!')
    }) 
  },
};

@前端进阶之旅: 代码已经复制到剪贴板

# 动态组件 keep-alive

当在这些组件之间切换的时候，你有时会想保持这些组件的状态，以避免反复重渲染导致的性能问题，这个时候就用用keep-alive
在不同路由切换的时候想保持组件的状态也可以使用keep-alive

<keep-alive>
       <life-cycle v-if="isShow"></life-cycle>
  </keep-alive>

@前端进阶之旅: 代码已经复制到剪贴板

# this.$nextTick

Vue中可以把获取Dom节点的代码放在mounted里面，但是如果要在渲染完成数据后获取DOM节点就需要用到this.$nextTick

 mounted() {
      this.$nextTick(function () {
        // 仅在渲染整个视图之后运行的代码
      })
 },

@前端进阶之旅: 代码已经复制到剪贴板

 mounted() {
       
        var oDiv1 = document.querySelector("#msg");
        console.log("1-" + oDiv1.innerHTML);
        this.msg = "$nextTick演示";
        var oDiv2 = document.querySelector("#msg");
        console.log("2-" + oDiv2.innerHTML);
        this.$nextTick(() => {
            // 仅在渲染整个视图之后运行的代码
            var oDiv3 = document.querySelector("#msg");
            console.log("3-" + oDiv3.innerHTML);
        })
    },

@前端进阶之旅: 代码已经复制到剪贴板

# 四、Mixin实现组件功能的复用

# mixin介绍使用

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

# 新建mixin/base.js

const baseMixin = {
    data() {
       return{
            apiDomain: "http://www.itying.com"
       }
       
    },
    methods: {
        success() {
            console.log('succss')
        },
        error() {
            console.error('error')
        }
    }
}

export default baseMixin;

@前端进阶之旅: 代码已经复制到剪贴板

# 使用mixin

<template>
<div>
    首页模板--{{apiDomain}}
</div>
</template>

<script>
import BaseMixin from '../mixin/base'
export default {
    mixins: [BaseMixin],
    data() {
        return {

        }
    }
}
</script>

@前端进阶之旅: 代码已经复制到剪贴板

# 关于Mixin的选项合并

当组件和混入对象含有同名选项时，这些选项将以恰当的方式进行“合并”

1. 数据对象在内部会进行递归合并，并在发生冲突时以组件数据优先

const myMixin = {
  data() {
    return {
      message: 'hello',
      foo: 'abc'
    }
  }
}

const app = Vue.createApp({
  mixins: [myMixin],
  data() {
    return {
      message: 'goodbye',
      bar: 'def'
    }
  },
  created() {
    console.log(this.$data) // => { message: "goodbye", foo: "abc", bar: "def" }
  }
})

@前端进阶之旅: 代码已经复制到剪贴板

2. 同名钩子函数将合并为一个数组，因此都将被调用。另外，混入对象的钩子将在组件自身钩子之前调用

const myMixin = {
  created() {
    console.log('mixin hook called')
  }
}

const app = Vue.createApp({
  mixins: [myMixin],
  created() {
    console.log('component hook called')
  }
})

// => "混入对象的钩子被调用"
// => "组件钩子被调用"

@前端进阶之旅: 代码已经复制到剪贴板

# 全局配置Mixin

你还可以为 Vue 应用程序全局应用 mixin

# Teleport

Modal.vue