利用ref函数获取组件中的标签元素，可以操作该标签身上的属性，还可以通过ref来取到子组件的数据，可以修改子组件的数据、调用子组件的方法等、非常方便. 适用于vue3.0版本语法，后续会讲到vue3.2版本setup语法糖有所不同。

语法示例:

<input标签 type="text" ref="inputRef">

setup 函数是一个新的组件选项，它会在 beforeCreate 钩子之前被调用。

<template>
  <div>
    <img alt="Vue logo" src="./assets/logo.png">
    <h1>vue3.0 beta</h1>
    <div>{{ count }} {{ object.foo }}</div>
    </div>
</template>

<script>
  import { ref, reactive } from 'vue'

  export default {
    setup() {
      console.log('setup')
      const count = ref(0)
      const object = reactive({ foo: 'bar' })

      // 暴露给模板
      return {
        count,
        object,
      }
    },
    created(){
      console.log('created')
    },
    beforeCreate(){
      console.log('beforeCreate')
    },
    mounted(){
      console.log('mounted')
    },
    beforeMount(){
      console.log('beforeMount')
    },
    data(){
      return {
        age: 18
      }
    }
  }
</script>

全文共5529字，预计学习时长16分钟

过去，我们看过很多重大变革即将到来的文章，但是并没有真正深入研究代码将如何变化。

为了展示这些变化，小芯将在Vue2和Vue3中构建一个简单的表单组件。

在本文的最后，将介绍Vue2和Vue3之间的主要编程差异，帮助大家了解，逐渐成为更好的开发人员。

前言

作为一个十几年开发经验的JAVA后端，对于前端多少也有一点了解，完全让我深入前端的还是自从自己接单给客户做项目后开始的。因为自己一个人干活你必须前后端都懂，不然你的成本就太高。有一段时间在用前端写组件的时候需要组件向其他组件传递数据，当时从网络上查找资料总是参差不齐，每个人说的不一样，但是每个人说的好像又没问题，最后才发现其实这些网络资料不一定是错的，只是资料说的有点片面，没有归纳总结从本质区别上说清楚组件通信的方式。

Vue.js 经历了从 Vue 2 到 Vue 3 的重大变革，带来了许多引人注目的新特性和性能优化。其中，

前言

本文主要是讲解

一、setup函数的特性以及作用

可以确定的是 Vue3.0 是兼容 Vue2.x 版本的 也就是说我们再日常工作中 可以在 Vue3 中使用 Vue2.x 的相关语法 但是当你真正开始使用 Vue3 写项目时 你会发现他比 Vue2.x 方便的多

定义骨架，写html和css

vue框架篇

vue的优点

轻量级框架：只关注视图层，是一个构建数据的视图集合，大小只有几十kb；

简单易学：国人开发，中文文档，不存在语言障碍 ，易于理解和学习；

双向数据绑定：保留了angular的特点，在数据操作方面更为简单；

一、Keep-alive 是什么

keep-alive是vue中的内置组件，能在组件切换过程中将状态保留在内存中，防止重复渲染