精华内容
下载资源
问答
  • vue3快速入门
    2021-10-13 18:27:57

    Vue3入门

    • 根实例初始化不同

      • 2.x中通过new Vue()的方法来初始化

        • import App from './App.vue'
          new Vue({
          	store,
          	render:h => h(App)
          }).$mount('#app')
          
      • 3.x中vue不再是一个构造函数,通过createApp方法初始化

        • import App from './App.vue'
          createApp(App).use(store).mount('#app')
          
    • ref或者reactive代替了data中的变量:

      • 在2.x中通过组件data的方法来定义一些当前组件需要的数据:

        • data(){
          	return{
          		name:'test',
          		list:[]
          	}
          }
          
      • 在3.x中通过ref或者reactive创建响应式对象:

        • import {ref,reactive} from 'vue'
          
          setup(){    //在setup中去定义参数,然后return出去
          	const name = ref('test')
          	const state = reactive({
          		list:[]
          	})
          	return {
          		name,
          		state
          	}
          }
          
          ref将给定的值创建一个响应式的数据对象并复制初始值(int/string),reactive可以直接定义复杂的响应式对象
          
    • methods中定义的方法也可以写在setup中

      • 在2.x中methods来定义一些当前组件内部方法

        • methods:{
          	getData(){
          		//
          	},
          }
          
      • 在3.x中直接在setup方法中定义并return

        • setup(){
          	const getData = ()=>{
          		console.log('getData')
          	}
          	
          	return{
          		getData
          	}
          }
          
    • 不能使用EventBus

      • 在2.x中通过EventBus的方法来实现组件通信

        • var EventBus = new Vue()
          Vue.prototype.$EventBus = EventBus
          
          this.$EvenetBus.$on()   this.$EventBus.$emit()
          
      • 在3.x中移除了 o n , on, onoff等方法,而是推荐使用mitt方案来代替

        • import mitt from 'mitt'
          const emitter = mitt()
          //监听一个事件
          emitter.on('foo',e =>console.log('foo',e))
          //触发事件
          emitter.emit('foo',{a:'b'})
          
          由于3.x中不再支持prototype的方式给Vue绑定静态方法,可以通过`app.config.globalProperties.mitt = () =>{}方案`
          
    • setup()中使用props和this

      • 在2.x中,组建的方法中可以通过this获取当前组件的实例,并执行data变量的修改,方法的调用、组建的通信等,但在3.x中,setup()在beforeCreate和created时机就已经调用,无法使用和2.x一样的this,但是可以通过接收setup(props,ctx)的方法,获取当前组件的实例和props

        • export default{
          	props:{
          		name:String,
          	},
          	setup(props,ctx){
          		console.log(props.name)
          		ctx.emit('event')
          	}
          }
          
          ctx和2.x中的this并不完全一样,而是选择性地暴露了一些property,主要有[attrs,emit,slots]
          
    • watch来监听对象改变

      • 2.x中,可以采用watch来监听一个对象属性是否有改动

        • data(){
          	return{
          		name:'a'
          	}
          },
          watch:{
          	name(val){
          		console.log(val)
          	}
          }
          
      • 3.x中,在setup()中,可以使用watch来监听

        • import {watch} form 'vue'
          setup(){
          	let state = reactive({
          		name:
          	})
          }
          

    vue3初探

    性能提升
    • proxy响应式
      • 响应式原理由Object.defineProperty改为基于ES6的Proxy
      • 优点:能够规避Object.defineProperty的问题
        • 深度监听:性能更好,不会递归到底而是在get到这个层级才会去递归
        • 可监听数组变化
        • 可监听新增、删除属性
        • 但无法兼容所有浏览器并无法polyfill
    • patchFlag静态标记
      • 编译模板时给动态节点做标记
      • diff算法时值会对比标记的节点
    • hoistStatic静态提升
      • 将静态节点的定义,提升到父作用域,缓存起来
      • 多个相邻的静态节点会被合并起来
    • cacheHandle缓存事件
      • 默认情况下@click也会进行动态标记
      • 增加cacheHandle会对事件进行缓存且没有PatchFlag未开启cacheHandler
    • SSR优化
      • 静态节点直接输出绕过了vdom
      • 动态节点动态渲染
    • tree shaking
      • 编译时根据不同的情况下引入不同的API,没用到的api会进行剔除。
    Composition API:组合API
    • 更好的代码组织和逻辑复用

    • setup:Composition API的入口点

    • 响应式API:reacitve、ref、computed、readonly、watch、watchEffct等

    • 新的生命周期函数:onMounted、onUpdated、onUnmounted等

    • 在这里插入图片描述

    • 自定义函数hooks函数

    其他新增特性
    • Teleport:瞬移组件的位置
    • Suspense:异步加载组件
    更好的TS支持
    优势
    • vue2存在复杂组件的代码变得难以维护并且对TS的支持有限
    • vue3的性能更好、体积更小、更好的TS支持、更好的代码组织和逻辑抽离。
    更多相关内容
  • 非常棒的 Vue3 Element 统解决方案 vue3快速入门vue3实用入门到熟练实例 学习了vue3官网、看了视频好像感觉知道了,但实际又不会建项目。这个项目就是上你从入门到熟练的实例。 该方案作为一套多功能的后台框架...
  • 本综合教程从以下几个方向入手,让你轻松快速入门,到熟练开发 1、vue3开发文档,以及从vue2到vue3关注的重点 2、精选视频教程,看完视频就会上手 3、分别介绍几个企业级使用的UI框架、手机UI框架 4、提供完整的例子...
  • vue3快速入门

    千次阅读 2021-11-28 17:58:42
    1. Vue3的生态和优势 社区生态 - 逐步完善 整体优化 - 性能优化/TS支持优化/组合式API加持 市场使用 - 部分技术选型激进的公司已经在生产环境使用了vue3 社区生态 组件(插件)名称 官方地址 简介 ant-...

    1. Vue3的生态和优势

    [外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-MO6NzkVO-1638093509806)(assets/vue3/00.png)]

    • 社区生态 - 逐步完善
    • 整体优化 - 性能优化/TS支持优化/组合式API加持
    • 市场使用 - 部分技术选型激进的公司已经在生产环境使用了vue3

    社区生态

    组件(插件)名称官方地址简介
    ant-design-vuehttps://antdv.com/docs/vue/introduce-cn/ant-design-vue 是 Ant Design 的 Vue 实现,组件的风格与 Ant Design 保持同步
    element-plushttps://element-plus.gitee.io/#/zh-CNElement Plus,一套为开发者、设计师和产品经理准备的基于 Vue 3.0 的桌面端组件库
    vanthttps://vant-contrib.gitee.io/vant/v3/#/zh-CN有赞前端团队开源的移动端组件库,于 2016 年开源,已持续维护 4 年时间
    Naive UIhttps://www.naiveui.com/zh-CN/一个 Vue 3 组件库比较完整,主题可调,使用 TypeScript,不算太慢,有点意思
    VueUsehttps://vueuse.org/基于composition组合api的常用集合,小兔仙项目会部分使用

    整体优化

    1. 性能提升
      • 首次渲染更快
      • diff算法更快
      • 内存占用更少
      • 打包体积更小
    2. 更好的Typescript支持
    3. Composition API (重点)

    相关阅读:

    1. Vue3 中文文档 https://vue3js.cn/docs/zh/
    2. Vue3 设计理念 https://vue3js.cn/vue-composition/

    市场使用

    ​ 潜力很大,还没完全火起来

    2. Vue3开发环境搭建

    接下来我们会学习vue3的一些新语法,首先我们先搭建一个基础环境,还是使用大家熟悉的vue-cli快速生成一个集成了vue3的环境

    本节任务: 掌握如何使用vue-cli搭建一个基于Vue3.0的开发环境

    1)选择自定义配置

    [外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-Ql9Hwxx8-1638093509808)(assets/vue3/01.png)]

    2)选中自定义安装版本

    3)选择3.x版本

    在这里插入图片描述

    以上步骤回车之后,vue-cli会帮助我们跑起来一个内置了vue3版本的vue项目

    首先我们可以看一下package.json文件,在dependencies配置项中显示,我们当前使用的版本为3.2.0

    "dependencies": {
        "vue": "^3.2.0"
    }
    

    然后打开main.js 入口文件,发现Vue的实例化发生了一些变化,由先前的new关键词实例化,转变为createApp方法的调用形式 (更多详情:https://www.bilibili.com/read/cv10133036

    vue2.x

    new Vue({
      el: '#app',
      render: h => h(App)
    })
    

    vue3.x

    import { createApp } from 'vue'
    import App from './App.vue'
    createApp(App).mount('#app')
    

    最后我们打开一个单文件组件发现,vue3.0的单文件组件中不再强制要求必须有唯一根元素

    <template>
      <img alt="Vue logo" src="./assets/logo.png">
      <HelloWorld msg="Welcome to Your Vue.js App"/>
    </template>
    

    以上就我们当前阶段需要关注的所有的东西,接下来我们就可以基于当前环境学习vue3的全新composition API

    Vue3中的两种API

    组合式API(Composition API)算是vue3对我们开发者来说非常有价值的一个API更新,我们先不关注具体语法,先对它有一个大的感知

    本节目标: 对组合式api(composition api)有一个大概的感性认知

    3. 风格对比

    在这里插入图片描述

    案例对比

    我们通过图示简单了解了一下vue3带来的全新的api形式,这一小节,我们通过一个具体的小案例更加深入的体会一下俩种api下的开发模式对比,大家暂时忽略语法细节,只关注代码编写形式

    本节目标: 通过俩种Api形式实现同一个需求,理解compition api 带来的好处

    理解需求

    在这里插入图片描述

    4. 选项式Api版本实现

    <template>
      <div>
        <!-- 功能一模板 -->
        <button @click="show">显示</button>
        <button @click="hide">隐藏</button>
        <div v-if="showDiv">一个被控制显隐的div</div>
      </div>
      <div>
        <!-- 功能二模板 -->
        <button @click="changeRed">红色</button>
        <button @click="changeYellow">蓝色</button>
        <div :style="`color:${fontColor}`">一个被控制字体颜色的的div</div>
      </div>
    </template>
    
    <script>
    export default {
      name: 'App',
      data() {
        return {
          showDiv: true, // 功能一数据
          fontColor: '' // 功能二数据
        }
      },
      methods: {
        // 功能一方法
        show() {
          this.showDiv = true
        },
        hide() {
          this.showDiv = false
        },
        // 功能二方法
        changeRed() {
          this.fontColor = 'red'
        },
        changeYellow() {
          this.fontColor = 'blue'
        }
      }
    }
    </script>
    

    5. 组合式API版本

    <template>
      <div>
        <!-- 功能一模板 -->
        <button @click="show">显示</button>
        <button @click="hide">隐藏</button>
        <div v-if="showDivFlag">一个被控制显隐的div</div>
      </div>
      <div>
        <!-- 功能二模板 -->
        <button @click="changeRed">红色</button>
        <button @click="changeBlue">蓝色</button>
        <div :style="`color:${fontColor}`">一个被控制字体颜色的的div</div>
      </div>
    </template>
    
    <script>
    import { ref } from 'vue'
    export default {
      name: 'App',
      setup() {
        // 功能一
        const showDivFlag = ref(true)
        function show() {
          showDivFlag.value = true
        }
        function hide() {
          showDivFlag.value = false
        }
        // 功能二
    
        const fontColor = ref('')
        function changeRed() {
          fontColor.value = 'red'
        }
        function changeBlue() {
          fontColor.value = 'blue'
        }
        return { showDivFlag, show, hide, fontColor, changeRed, changeBlue }
      }
    }
    </script>
    

    组合式API优化版本

    大家可能会有疑惑,那我们现在是把功能相关的所有数据和行为放到一起维护了,如果应用很大功能很多的情况下,setup函数不会变得很大吗?岂不是又会变得比较难维护,接下来我们就来拆解一下庞大的setup函数

    <script>
    import { ref } from 'vue'
    // 功能A
    function useShow() {
      const showDivFlag = ref(true)
      function show() {
        showDivFlag.value = true
      }
      function hide() {
        showDivFlag.value = false
      }
      return { showDivFlag, show, hide }
    }
    // 功能B
    function useColor() {
      const fontColor = ref('')
      function changeRed() {
        fontColor.value = 'red'
      }
      function changeBlue() {
        fontColor.value = 'blue'
      }
      return { fontColor, changeRed, changeBlue }
    }
    export default {
      name: 'App',
      setup() {
        // 功能一
        const { showDivFlag, show, hide } = useShow()
        // 功能二
        const { fontColor, changeRed, changeBlue } = useColor()
        return { showDivFlag, show, hide, fontColor, changeRed, changeBlue }
      }
    }
    </script>
    
    

    以上,我们通过定义功能函数,把俩个功能相关的代码各自抽离到一个独立的小函数中,然后通过在setUp函数中再把俩个小功能函数组合起来,这样一来,我们既可以把setup函数变得清爽,又可以方便维护快速定位功能位置

    6. 选项式和组合式API的关系

    本节目标: 能够理清楚俩种API之间的关系

    1. 组合式API的目的是增强,不是取代选项式API,vue3.x对俩种API都支持
    2. 简单的场景使用选项式API更加简单方便
    3. 需要强烈支持TS的项目首选组合式API
    4. 需要大量逻辑复用的场景首选组合式API

    nice~ 到此我们没有关注api细节,只是体会组合式api给到我们的好处,接下来我们就要深入到api细节,看看全新的api都该如何使用

    组合式API

    7. setup入口函数

    本节目标: 能够理解setup函数的作用和调用时机

    主要内容

    1. setup 函数是一个新的组件选项,作为组件中组合式API 的起点(入口)
    2. setup 函数只会在组件初始化的时候执行一次
    3. setup 函数在beforeCreate生命周期钩子执行之前执行,实例还没生成,没有this

    代码演示

    export default {
      setup () {
        console.log('setup执行了')
        console.log(this)
      },
      beforeCreate() {
        console.log('beforeCreate执行了')
        console.log(this)
      }
    }
    

    8. 响应式API - reactive

    本节目标: 掌握reactive函数的作用和使用步骤

    作用

    ​ reactive是一个函数,接收一个普通的对象传入,把对象数据转化为响应式对象并返回

    使用步骤

    1. 从vue框架中导入reactive函数
    2. 在setup函数中调用reactive函数并将想要变成响应式的对象数据当成参数传入
    3. 在setup函数中把reactive函数调用完毕之后的返回值以对象的形式返回出去

    代码演示

    <template>
      <div>{{ state.name }}</div>
      <div>{{ state.age }}</div>
      <button @click="state.name = 'pink'">改值</button>
    </template>
    
    <script>
    import { reactive } from 'vue'
    export default {
      setup () {
        const state = reactive({
          name: 'zs',
          age: 18
        })
        return {
          state
        }
      }
    }
    </script>
    

    9. 响应式API - ref

    本节目标: 了解ref函数的作用和使用步骤

    作用

    ​ ref是一个函数,接受一个简单类型或者复杂类型的传入并返回一个响应式且可变的 ref 对象

    使用步骤

    1. 从vue框架中导出ref函数
    2. 在setup函数中调用ref函数并传入数据(简单类型或者复杂类型)
    3. 在setup函数中把ref函数调用完毕的返回值以对象的形式返回出去
    4. **注意:**在setup函数中使用ref结果,需要通过.value 访问,模板中使用不需要加.value

    代码演示

    <template>
      <div>{{ money }}</div>
      <button @click="changeMondy">改值</button>
    </template>
    
    <script>
    import { ref } from 'vue'
    export default {
      setup() {
        let money = ref(100)
        console.log(money.value)
        return {
          money
        }
      }
    }
    </script>
    

    10. reactive 对比 ref

    本节目标: 知道俩个API的特定以及如何在项目中选择

    1. ref 函数可以接收一个简单类型的值,返回一个可改变的 ref 响应式对象,从而弥补reactive函数不支持简单类型的问题
    2. reactive和ref函数都可以提供响应式数据的转换,具体什么时候需要使用哪个API社区还没有最佳实践,大家暂时可以使用自己熟练的API进行转换
    3. **推荐写法 **只有我们明确知道要转换的对象内部的字段名称我们才使用reactive,否则就一律使用ref,从而降低在语法选择上的心智负担

    11. 响应式API - computed

    本节目标: 掌握在计算属性函数computed的作用和使用步骤

    作用

    ​ 根据现有响应式数据经过一定的计算得到全新的数据

    使用步骤

    1. 从vue框架中导入computed 函数
    2. 在setup函数中执行computed函数,并传入一个函数,在函数中定义计算公式
    3. 把computed函数调用完的返回值放到setup函数return出去的对象中

    代码演示
    在这里插入图片描述

    <template>
      {{ list }}
      {{ filterList }}
      <button @click="changeList">change list</button>
    </template>
    
    <script>
    import { computed, ref } from 'vue'
    export default {
      setup() {
        const list = ref([1, 2, 3, 4, 5, 6])
        // 输入大于2的数字
        const filterList = computed(() => {
          return list.value.filter(item => item > 2)
        })
        // 修改list的函数
        function changeList() {
          list.value.push(6, 7, 8)
        }
        return {
          list,
          filterList,
          changeList
        }
      }
    }
    </script> 
    

    12. 响应式API - watch

    本节目标: 掌握在侦听器watch函数的作用和使用步骤

    作用

    ​ 基于响应式数据的变化执行回调逻辑,和vue2中的watch的功能一致

    1. 普通监听
    2. 立即执行
    3. 深度监听

    使用步骤

    1. 从vue框架中导入watch函数
    2. 在setup函数中执行watch函数开启对响应式数据的监听
    3. watch函数接收三个常规参数
      1. 第一个参数为函数,返回你要监听变化的响应式数据
      2. 第二个参数为响应式数据变化之后要执行的回调函数
      3. 第三个参数为一个对象,在里面配置是否开启立刻执行或者深度监听

    代码演示

    1)普通监听

    <template>
      {{ age }}
      <button @click="age++">change age</button>
    </template>
    
    <script>
    import { ref, watch } from 'vue'
    export default {
      setup() {
        const age = ref(18)
        watch(() => {
          return age.value
        }, () => {
          // 数据变化之后的回调函数
          console.log('age发生了变化')
        })
        return {
          age
        }
      }
    }
    </script> 
    

    2)开启立刻执行

    watch的效果默认状态下,只有监听的数据发生变化才会执行回调,如果你需要在一上来的时候就立刻执行一次,需要配置一下immediate属性

    <template>
      {{ age }}
      <button @click="age++">change age</button>
    </template>
    <script>
    import { ref, watch } from 'vue'
    export default {
      setup() {
        const age = ref(18)
        watch(() => {
          // 返回你想要监听的响应式属性(ref产生的对象必须加.value)
          return age.value
        }, () => {
          // 数据变化之后的回调函数
          console.log('age发生了变化')
        },{ immediate: true})
        return {
          age
        }
      }
    }
    </script> 
    

    3)开启深度监听

    当我们监听的数据是一个对象的时候,默认状态下,对象内部的属性发生变化是不会引起回调函数执行的,如果想让对象下面所有属性都能得到监听,需要开启deep配置

    <template>
      {{ state.name }}
      {{ state.info.age }}
      <button @click="name = 'pink'">change name</button>
      <button @click="info.age++">change age</button>
    </template>
    
    <script>
    import { reactive, toRefs, watch } from 'vue'
    export default {
      setup() {
        const state = reactive({
          name: 'zs',
          info: {
            age: 18
          }
        })
        watch(() => {
          return state
        }, () => {
          // 数据变化之后的回调函数
          console.log('age发生了变化')
        }, {
          deep: true
        })
        return {
          state
        }
      }
    }
    </script> 
    

    4)更好的做法

    使用watch的时候,尽量详细的表明你到底要监听哪个属性,避免使用deep引起的性能问题,比如我仅仅只是想在state对象的age属性变化的时候执行回调,可以这么写

    <template>
      {{ state.name }}
      {{ state.info.age }}
      <button @click="state.name = 'pink'">change name</button>
      <button @click="state.info.age++">change age</button>
    </template>
    
    <script>
    import { reactive, toRefs, watch } from 'vue'
    export default {
      setup() {
        const state = reactive({
          name: 'zs',
          info: {
            age: 18
          }
        })
        watch(() => {
          // 详细的告知你要监听谁
          return state.info.age
        }, () => {
          // 数据变化之后的回调函数
          console.log('age发生了变化')
        })
        return {
          state
        }
      }
    }
    </script> 
    

    生命周期函数

    13. 回顾生命周期

    本节目标: 复习生命周期,理解生命周期的作用

    14. 在 setup 函数中使用生命周期钩子函数

    本节目标: 掌握如何在setup函数中如何使用生命周期函数

    使用步骤

    1. 先从vue中导入以on打头的生命周期钩子函数
    2. 在setup函数中调用生命周期函数并传入回调函数
    3. 生命周期钩子函数可以调用多次

    代码演示

    <template>
      <div>生命周期函数</div>
    </template>
    
    <script>
    import { onMounted } from 'vue'
    export default {
      setup() {
        // 时机成熟 回调函数自动执行
        onMounted(() => {
          console.log('mouted生命周期执行了')
        })
        onMounted(() => {
          console.log('mouted生命周期函数又执行了')
        })
      }
    }
    </script> 
    
    选项式API下的生命周期函数使用组合式API下的生命周期函数使用
    beforeCreate不需要(直接写到setup函数中)
    created不需要(直接写到setup函数中)
    beforeMountonBeforeMount
    mountedonMounted
    beforeUpdateonBeforeUpdate
    updatedonUpdated
    beforeDestroyonBeforeUnmount
    destroyedonUnmounted

    15. 生命周期钩子函数使用场景

    生命周期钩子函数应用场景
    created发送ajax请求 / 挂载共用属性
    mounted发送ajax请求 / 依赖于dom的业务,比如地图,图表
    destroyed销毁操作,比如定时器

    16. 父子通信

    本节目标: 掌握在组合式API下的父子通信

    在vue3的组合式API中,父传子的基础套路完全一样,基础思想依旧为:父传子是通过prop进行传入,子传父通过调用自定义事件完成

    实现步骤

    1. setup函数提供俩个参数,第一个参数为props,第二个参数为一个对象context
    2. props为一个对象,内部包含了父组件传递过来的所有prop数据,context对象包含了attrs,slots, emit属性,其中的emit可以触发自定义事件的执行从而完成子传父

    代码演示

    [外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-YPgbEQow-1638093509814)(assets/vue3/props.png)]

    app.vue

    <template>
      <son :msg="msg" @get-msg="getMsg"></son>
    </template>
    
    <script>
    import { ref } from 'vue'
    import Son from './components/son'
    export default {
      components: {
        Son
      },
      setup() {
        const msg = ref('this is msg')
        function getMsg(msg) {
          console.log(msg)
        }
        return {
          msg,
          getMsg
        }
      }
    }
    </script>
    

    components/Son.vue

    <template>
      <div>
        {{msg}}
        <button @click="setMsgFromSon">set</button>
      </div>
    </template>
    
    <script>
    export default {
      props: {
        msg: {
          type: String
        }
      },
      emits: ['get-msg'], // 声明当前组件触发的自定义事件
      setup(props,{emit}) {
        function setMsgFromSon(){
          emit('get-msg','这是一条来自子组件的新的msg信息')
        }
        return {
          setMsgToSon
        }
      }
    }
    </script>
    

    17. provide 和 inject

    1. 使用场景

    本节目标: 能够说清楚这对API的使用场景,解决了什么问题

    通常我们使用props进行父子之间的数据传递,但是如果组件嵌套层级较深,一层一层往下传递将会变的非常繁琐,有没有一种手段可以把这个过程简化一下呢,有的,就是我们马上要学习的provide 和 inject,它们配合起来可以方便的完成从顶层组件向任意底层组件传递数据的效果

    在这里插入图片描述

    2. 基础使用

    本节目标: 掌握在setup函数中使用provide和inject的基础用法

    需求:爷组件中有一份数据 传递给孙组件直接使用

    实现步骤

    1. 顶层组件在setup方法中使用provide函数提供数据

      provide('key',数据)

    2. 任何底层组件在setup方法中使用inject函数获取数据

      const data = inject('key')

    代码落地

    爷爷组件 - app.vue

    <template>
      <father></father>
    </template>
    
    <script>
    import Father from '@/components/Father'
    import { provide } from 'vue'
    export default {
      components: {
        Father
      },
      setup() {
        let name = '张三'
        // 使用provide配置项注入数据 key - value
        provide('name', name)
      }
    }
    </script> 
    

    孙组件 - components/Son.vue

    <template>
      我是子组件
      {{ name }}
    </template>
    
    <script>
    import { inject } from 'vue'
    export default {
      setup() {
        const name = inject('name')
        return {
          name
        }
      }
    }
    </script>
    

    事实上,只要是后代组件,都可以方便的获取顶层组件提供的数据

    3. 传递响应式数据

    provide默认情况下传递的数据不是响应式的,也就是如果对provide提供的数据进行修改,并不能响应式的影响到底层组件使用数据的地方,如果想要传递响应数据也非常简单,只需要将传递的数据使用ref或者reactive生成即可

    本节目标: 掌握如何通过provide/inject传递响应式数据

    app.vue

    <template>
      <father></father>
      <button @click="changeName">change name</button>
    </template>
    
    <script>
    import Father from '@/components/Father'
    import { provide, ref } from 'vue'
    export default {
      components: {
        Father
      },
      setup() {
        // 使用ref转换成响应式再传递
        let name = ref('张三')
        function changeName(){
          name.value = 'pink'
        }
        provide('name', name)
        return {
          changeName
        }
      }
    }
    </script> 
    

    18. TemplateRef

    本节目标: 掌握在setup函数中如何使用ref获取dom节点或者组件实例对象

    背景知识

    ​ 在模板中使用ref,我们都很清楚,它一般有三种使用场景

    1. ref + 普通dom标签 获取真实dom对象
      this.$refs.box
    2. ref + 组件标签 获取组件实例对象 this.$refs.form.validate()
    3. ref + v-for 获取由dom对象(实例对象)组成的数组 (不经常使用

    实现步骤

    1. 使用ref函数传入null创建 ref对象 => const hRef = ref(null)
    2. 模板中通过定义ref属性等于1中创建的ref对象名称建立关联 => <h1 ref="hRef"></h1>
    3. hRefreturn出去
    4. 使用 => hRef.value

    代码落地

    components/RefComponent.vue

    <template>
      我是一个普通的组件
    </template>
    

    app.vue

    <template>
      <h1 ref="h1Ref">我是普通dom标签</h1>
      <ref-component ref="comRef"></ref-component>
    </template>
    
    <script>
    import { onMounted, ref } from 'vue'
    import RefComponent from '@/components/RefComponent'
    export default {
      components: {
        RefComponent
      },
      setup() {
        const h1Ref = ref(null)
        const comRef = ref(null)
        onMounted(() => {
          console.log(h1Ref.value)
          console.log(comRef.value)
        })
        // 必须return
        return {
          h1Ref,
          comRef
        }
      }
    }
    </script> 
    

    19. 非兼容语法

    vue3.0对于2.0版本的大部分语法都是可以兼容的,但是也有一些破坏性的语法更新,这个大家要格外注意

    1. 实例方法$on移除 (eventBus现有实现模式不再支持 可以使用三方插件替代)

      event Bus
       1. Vue.prototype.$eventBus = new Vue()
       2. 接收数据的组件里  this.$eventBus.$on('get-msg',(msg)=>{ })
       3. 发送数据的组件里  this.$eventBus.$emit('get-msg','传递的数据')
       
      vue3中默认情况下eventBus模式是不支持的  
      使用三方插件替代
      
    2. 过滤器filter移除 (插值表达式里不能再使用过滤器 可以使用methods替代)

      filter过滤器
      字符串的格式化  方法 接收原字符串 返回格式化之后的字符串
      
      {{ msg | formatMsg }}
      
      vue3直接移除了该语法  可以直接使用methods替代 
      
      {{ formatMsg('this is msg') }}  // 渲染的结果是什么呢? 函数return值
      methods:{
        formatMsg(msg){
           return msg + 'zs'
        }
      }
      
    3. .sync语法移除 (和v-model语法合并)

      .sync语法
      elementUI  -> Dialog  visible.sync="showFlag"
      作用: 简化父子通信 自定义事件的触发
      .sync -> v-model(重点)
      

    更多阅读:https://v3.cn.vuejs.org/guide/migration/introduction.html

    展开全文
  • Vue3快速入门教程

    千次阅读 2020-12-29 02:22:23
    学某个新技能时,大多数人倾向于:一开始就从头到尾完整学一遍;...比如想在初始化时附带帮你做一些事 下图是Vue3官方的生命周期图 创建vm实例时, 常用的钩子函数有: created(){} mounted(){} //TODO 未完待续

    学某个新技能时,大多数人倾向于:一开始就从头到尾完整学一遍;甚至有人翻来覆去重复学很多遍也达不到熟记于心, 我个人认为,这不是最好的办法~
    我的建议的是: 面向需求 or 面向问题来学习. 最开始你可能不了解你要实现的效果会涉及哪些技术知识点, 那么你可以像产品经理那样先列出PRD, 再根据PRD来一步一步地实现
    当你最终完成了整个作品时, 你会发现, 你已经通过这些"点"逐步形成"面", 对于Vue的学习就达到了事半功倍的效果~


    01:我想做一个类似广告显示屏一样的东西, 支持动态修改, 以便我可以随时控制它的内容

    Data Property模板, 俗称: 变量模板

    • 第一种: 在<>内的,属于HTML attribute
    • 第二种: 普通的Mustache语法 : 双大括号-> {{number}} 的文本

    1.模板实际演练: 每秒改变1次msg
    <!DOCTYPE html>
    <html lang="en">
    <head>
        <meta charset="UTF-8">
        <title>学学Vue的动态模板01</title>
    </head>
    <body>
    <div id="app">
        <span>Message: {{ msg }}</span>
    </div>
    <script src="https://unpkg.com/vue@next"></script>
    <script>
        Vue.createApp({
            data() {
                return {msg: 0}
            },
            methods: {
                add() {
    
                    this.msg++;
                    console.log(this.msg);
                }
            },
            mounted() {
                //在生命周期走完mounted之后, 开始执行: 每秒刷新一次msg值
                setInterval(this.add, 1000);
            }
        }).mount('#app')
    </script>
    
    </body>
    </html>
    

    msg有2种访问方式, 同样用定时器例子来说明:

    <!DOCTYPE html>
    <html lang="en">
    <head>
        <meta charset="UTF-8">
        <title>学学Vue的动态模板02</title>
    </head>
    <body>
    <div id="app">
        <span>Message: {{ msg }}</span>
    </div>
    <script src="https://unpkg.com/vue@next"></script>
    <script>
        const app = Vue.createApp({
            data() {
                return {msg: 1}
            }
        })
    
        const vm = app.mount('#app')
    
        //用原生JS定时器执行: 2种方式修改msg的值
        setInterval(function () {
            vm.$data.msg = 10
        }, 500);
        setInterval(function () {
            vm.msg = 20
        }, 1000);
    </script>
    
    </body>
    </html>
    
    </script>
    
    </body>
    </html>
    
    
    2.模板实际演练: 例如把id做成动态的

    下面是一个普通的带id的div, 做过UI自动化的铁子不陌生吧? 常常会用元素的id来做Xpath定位

    <div id="Lee"></div>
    

    那么, 从开发的角度来看, 可以使用v-bind来"动态定义"元素的id

    <div v-bind:id="dynamicId"></div>
    

    Vue官方推荐-------将v-bind省略掉,简约又美观, 所以上面这句html中的v-bind去掉就变成

    <div :id="dynamicId"></div>
    

    那么在控制逻辑里就可以设置id的名称了, 而不是写死它
    完整代码:

    <!DOCTYPE html>
    <html lang="en">
    <head>
        <meta charset="UTF-8">
        <title>学学Vue的动态id</title>
    </head>
    <body>
    <div id="app" style="text-align: center;">
    <div :id="dynamicId">
        <button @click.once="modify_div_id" >{{msg}}</button>
    </div>
    </div>
    <script src="https://unpkg.com/vue@next"></script>
    <script>
        Vue.createApp({
            data() {
                return {dynamicId: "test",msg:"点我,然后F12查看一下父级div的id"}
            },
            methods: {
                //click触发id变更
                modify_div_id() {
                    this.dynamicId = "prd";
                    this.msg = "修改已触发! 父级div的id变更为'prd'";
                }
            }
        }).mount('#app')
    </script>
    
    </body>
    </html>
    
    

    此时你可能觉得, 这有啥用, 没什么需求会涉及到动态id的吧?
    – 没错, 下一步我们改个样式玩玩?

    02: 我想做一个动态style, 随机切换div的颜色

    <!DOCTYPE html>
    <html lang="en">
    <head>
        <meta charset="UTF-8">
        <title>学学Vue的动态style</title>
    </head>
    <body>
        <div id="app" style="text-align: center;">
            <div :style="default_style">
                目标div
            </div>
    
            <button v-on:click="modify_class_color">点我换个心情</button>
        </div>
        <script src="https://unpkg.com/vue@next"></script>
        <script>
            Vue.createApp({
                data() {
                    return {
                        default_style: {
                            "background-color": "rgba(21, 199, 100, 0.408)",
                            "fontSize": '50px'
                        },
                    }
                },
                methods: {
                    //click触发执行这个class修改函数 
                    modify_class_color() {
                        this.default_style["background-color"] = this.randomColor();
                    },
                    //随机生成一个rgba颜色
                    randomColor() {
                        let color = "#";
                        for (let i = 0; i < 8; i++) color += parseInt(Math.random() * 16).toString(16);
                        console.log(color)
                        return color;
                    }
                }
            }).mount('#app')
        </script>
    
    </body>
    
    </html>
    

    怎么样, 找到黄色 了吗? ๑乛◡乛๑ 手动滑稽~

    在PD-01章节你已经学会了用按钮控制style了, 以此类推, 如果你也想给某个东西设置一个开关, 当你触发开关时才做某些事, 也很简单

    1.v-on实际演练: 点一下按钮, msg增加1
    <!DOCTYPE html>
    <html lang="en">
    <head>
        <meta charset="UTF-8">
        <title>学学Vue的v-on</title>
    </head>
    <body>
    <div id="app">
        <button v-on:click="add">Message: {{ msg }}</button>
    </div>
    <script src="https://unpkg.com/vue@next"></script>
    <script>
        Vue.createApp({
            data() {
                return {msg: 0}
            },
            methods: {
                //click触发执行add函数, 即可将msg自增1
                add() {
                    this.msg++
                }
            }
        }).mount('#app')
    </script>
    
    </body>
    </html>
    

    Vue官方推荐-------将v-on缩写为@ 简约又美观, 所以上面案例里的html中button可以改为

    <button @click="add">Message: {{ msg }}</button>
    

    03:我想做一些条件判断,减少代码量

    还有一些常用的v-指令:

    1.v-if实际演练:

    <p v-if="seen">现在你看到我了</p>
    //这里,v-if 指令将根据表达式 seen 的值的真假来插入/移除 <p> 元素
    

    v-for

    <!DOCTYPE html>
    <html lang="en">
    <head>
        <meta charset="UTF-8">
        <title>Title</title>
    </head>
    <body>
    <div id="app">
        <p v-for="(item,i) in list">数据是{{item}},它在数组里的下标是{{i}}</p>
    </div>
    <script src="https://unpkg.com/vue@next"></script>
    <script>
        Vue.createApp({
            data() {
                return {list:[1,2,3,4,5]}
            }
        }).mount('#app')
    </script>
    
    </body>
    </html>
    

    0X:当你逐步深入vue时, 就会有些需求要用到钩子, 先不管什么是钩子, 先测试钩子的作用, 自然就可以理解~

    1.比如想在初始化时附带帮你做一些事

    下图是Vue3官方的生命周期图
    在这里插入图片描述

    创建vm实例时, 常用的钩子函数有:
    created(){}
    mounted(){}
    
    //TODO 未完待续
    
    展开全文
  • vite-vue3-tailwind:具有Vite脚手架,通用ESLint插件的Vue3快速入门样板
  • Vue3.0快速入门

    2021-06-30 20:51:49
    2h极速入门Vue3.0 年终岁尾,又到了打工人写总结的时候,各位前端工程师,今年你的总结里是否有“Vue3.0”的身影呢? 9月Vue3.0问世,对前端人来说,这是技术升级的一大步,同样也是一场学习效率的角逐。 不论你...
  • 00-vue3入门.md

    2021-09-25 17:43:18
    00-vue3入门.md
  • 快速入门 vue3,看这个就够了

    千次阅读 2022-05-11 15:47:07
    学习内容: 使用vue-cli创建项目 使用vite创建项目 掌握setup 掌握ref函数 掌握reactive函数 对比ref和reactive computed ...vue create vue3Project //创建一个项目 cd vue3Project npm run serv

    学习内容:

    1. 使用vue-cli创建项目
    2. 使用vite创建项目
    3. 掌握setup
    4. 掌握ref函数
    5. 掌握reactive函数
    6. 对比ref和reactive
    7. computed
    8. watch和watchEffect
    9. toRef和toRefs
      10.shallowReactive和shallowRef
      11.readonly和shallowReadonly
      12.toRaw和markRaw
      13.provide和inject
      14.组合式api的优势
      15.新的组件

    使用vue-cli创建项目:

    注意:版本一定要在4.5.0以上

    vue --version//查看当前的版本
    npm install -g @vue/cli //安装和更新你的vue-cli的版本
    vue create vue3Project  //创建一个项目
    cd  vue3Project  
    npm run serve  //启动项目
    

    使用vite创建项目:

    注意:需要 Node.js 版本 >= 12.0.0。

    //npm 
    npm init vite@latest
    //yarn
    yarn create vite
    # npm 6.x
    npm init vite@latest my-vue-app --template vue
    # npm 7+, 需要额外的双横线:
    npm init vite@latest my-vue-app -- --template vue
    # yarn
    yarn create vite my-vue-app --template vue
    

    掌握setup:

    1.setup 是新引入的,是vue3特有的,值为一个函数(了解)
    2.vue2的数据和方法等等都配置到setup里(掌握)
    3.setup的属性和方法可以在模板直接调用(重点)
    4.注意点:(掌握)
    不要和vue2混淆
    vue2里的配置(data,methods…)可以访问setup里的属性和方法,但是setup访问不了vue2里的配置,如果同时存在setup 优先
    在这里插入图片描述
    在这里插入图片描述
    5.setup两个注意点:
    (1)执行时机:在beforeCreate之前执行,this是undefined
    (2) setup的参数:首先看一下返回

    在这里插入图片描述
    在这里插入图片描述
    props:值为对象,包含组件外部传递过来,且组件内部声明接受了的属性
    context:上下文对象:
    attrs:值为对象,包含:组件外部传递过来的,但没有props配置中声明的属性,相当于this, a t t r s s l o t s : 收 到 的 插 槽 内 容 , 相 当 于 t h i s . attrs slots:收到的插槽内容,相当于this. attrsslots:this.slots
    emit:分发自定义事件的函数,相当于this.$emit

    掌握ref:

    1.处理基本类型数据
    上面的年龄并没有双向绑定,这里通过ref实现,ref()返回值是个函数,修改值+‘.value’
    在这里插入图片描述
    在这里插入图片描述
    2.处理对象类型
    在这里插入图片描述
    在这里插入图片描述

    掌握reactive函数:

    1.主要是处理对象
    在这里插入图片描述

    对比ref和reactive:

    1.从定义数据的角度:
    ref用来定义 基本类型数据
    rective用来定义 对象(数组)类型数据
    备注:ref也可以定义对象(数组)类型数据,它内部会自动通过reactive 转为代理对象
    2.使用角度对比
    ref定义的数据:操作数据需要.value,读取数据时模板中不需要加.value
    reactive 均不需要加.value

    computed:

    举个用户结账的例子
    在这里插入图片描述
    在这里插入图片描述

    watch:

    1.与vue2的配置一致
    2.两个小坑:
    (1)监听reactive定义的响应式数据时:oldvalue无法正确获取,强制开始了深度监视(deep配置失效)
    (2)监听reactive定义的响应式的数据中的某个属性时:deep配置有效
    在这里插入图片描述
    在这里插入图片描述
    在这里插入图片描述
    在这里插入图片描述
    oldvalue无法正确获取
    在这里插入图片描述
    在这里插入图片描述
    强制开始了深度监视(deep配置失效)在这里插入图片描述
    在这里插入图片描述
    监听reactive所定义的响应式数据 的某个属性oldValue是能够正常获取的
    在这里插入图片描述
    在这里插入图片描述
    在这里插入图片描述

    特殊情况:

    在这里插入图片描述
    在这里插入图片描述
    在这里插入图片描述

    watchEffect:

    1.watch :监视的属性+回调
    2.watchEffect:不用指明监视的属性,回调中用到哪就个监视哪个,一个字智能
    3.watchEffect和computed很想:
    (1)但是computed注重的是计算,一定要走返回值
    (2)wachEffect注重的是过程,不需要返回值

    toRef和toRefs:

    在这里插入图片描述
    这里一直重复shop.,是不是有点繁琐
    在这里插入图片描述
    在这里插入图片描述

    shallowReactive和shallowRef

    就是处理最外层的属性,了解就行

    readonly和shallowReadonly

    深只读和浅只读
    应用场景:不希望数据修改时

    toRaw和markRaw

    toraw:
    作用:将一个有reactive生成的响应式对象转换为普通对象
    应用场景:用于读取响应式对象对应的普通对象,对这个普通对象的所以操作,不会引起页面的更新
    markraw:
    作用:标记一个对象,使其永远不再成为响应式的数据
    应用场景:
    1.有些值不应该设置为响应式,例如:复杂的第三反类库
    2.当渲染具有不可变的数据源的大列表时,跳过响应式的转换可以提高性能

    provide和inject

    作用:祖孙组件之间的通信
    在这里插入图片描述
    vue2的这中套娃需要一层一层的传,特别麻烦,vue3利用provide引入 其他组件可以利用inject调用
    在这里插入图片描述
    在这里插入图片描述
    在这里插入图片描述

    在这里插入图片描述
    后代组件都是响应式的数据

    组合式api的优势

    vue2叫配置式api: 拆分的太零碎了,不利于日后维护
    在这里插入图片描述
    vue3叫组合式api
    在这里插入图片描述
    Composition API最大的优点通俗的讲就是把跟一个功能相关的东西放在一个地方,它是目前最合理也是最容易维护的,你可以随时将功能的一部分拆分出去。你可以将每一个功能相关所有的东西比如methods,computed都放在如上图的function中,这个function可以独立的存在,最终Composition API把他们组合起来。

    新的组件

    1.Fragment
    vue2中组件中必须有一个根标签
    vue3则不需要加根标签了,外层有个Fragment虚拟元素包裹,这样就减少了层级嵌套和内存的开销
    2.teleport
    Teleport 是一种能够将我们的模板移动到 DOM 中 Vue app 之外的其他位置的技术。
    举个例子

    <teleport to="#modal">
          <p>Hello, I'm a modal window.</p>
      </teleport>
    

    teleport 中的任何内容都将渲染在目标元素中

    展开全文
  • Vue3实战教程(快速入门

    千次阅读 2022-07-22 17:12:14
    本教程通过搭建一个简单项目,帮助读者快速入门Vue3项目实战,掌握Vue3、TS、Element Plus、axios等技术栈。
  • 是一种能够将我们的模板移动到 DOM 中 Vue app 之外的其他位置的技术。如果我们嵌套在 Vue app 内的某个组件内部,那么处理嵌套组件的定位、z-index 和样式就会变得很困难。 使用 就可以方便的解决组件间 css 层级...
  • Vue3快速入门——学习笔记

    千次阅读 2022-03-01 15:21:07
    Vue3快速上手1. 分析工程结构main.jsApp.vue2. setup3. ref()4. reactive()5. Vue3.0中的响应式原理vue2.x的响应式Vue3.0的响应式6. reactive和ref的区别 1. 分析工程结构 如图所示,是使用 vue-cli 创建的结构,和...
  • Vue2.0快速入门

    2022-04-23 23:11:35
    cnpm install vue-cli -g 安装后查看 vue list 创建webpack项目 在想要创建的文件目录下进入控制台,运行以下命令 vue init webpack 项目名称 一路选择no cd 项目名称 npm install npm run de
  • vue-router 快速入门 配置路由 $ npm install vue-router --save routes.js import Home from './pages/Home.vue' import Gifs from './pages/Gifs.vue' import User from './pages/User.vue' export const ...
  • Vue快速入门

    千次阅读 2022-02-17 19:39:36
    最近学习了Vue框架的相关内容...(3) Vue的应用方向 ①项目整合 ②单页面应用 二、Vue下载与使用 (1)这里先说一下Vue的官方网站https://cn.vuejs.org 先进行下载Vue封装的js文件,再配合技术文档:https://cn.vue
  • VUE3快速入门(一)---创建项目

    千次阅读 多人点赞 2020-12-01 13:36:52
    VUE3安装最新脚手架创建项目运行项目新老版本main.js对比vue2.x版本vue3.x版本如果使用HTML 安装最新脚手架 文档给出,使用新版脚手架可以搭建vue3.x项目 npm install -g @vue/cli 目前最新是4.5.9版本 使用图形化...
  • import Vue from 'vue' Vue.nextTick(() => {})
  • import Vue from 'vue' import App from './App.vue' import router from './router' Vue.config.productionTip = false new Vue({ router, render: h => h(App), }).$...
  • vue学习快速入门

    2019-01-08 10:30:21
    史上最强大视频 让你快速入门成为大牛课程详细 有代码
  • VuePress快速入门指南 这是Packt发行的的代码库。 利用Vue.js的力量构建快速的静态网站 这本书是关于什么的? 什么是静态网站生成器,为什么需要它们,它们比一般的博客或写作或内容工具更好吗? 当您学习如何...
  • vue2.5快速入门源代码

    2020-09-07 19:55:24
    对应blog源代码 vue2.5快速入门(一):https://blog.csdn.net/zengraoli/article/details/108454543 vue2.5快速入门(二):https://blog.csdn.net/zengraoli/article/details/108454656
  • 快速教你学VUE3

    2022-08-19 09:16:49
    的语法,保证看完本文你直接可以做项目,主要讲解vue3中新增的语法,不包括。语法糖中,在使用vue的api的时候,需要按需导入,才可使用。中已经存在的api,以及包括。看的文章,教你快速的适应。如需学习,可以跳转...

空空如也

空空如也

1 2 3 4 5 ... 20
收藏数 24,520
精华内容 9,808
关键字:

vue3快速入门