vue3 day01

花花522

发布于 2023-03-07 16:05:10

18500

代码可运行

文章被收录于专栏：花花爱咖啡花花爱咖啡

运行总次数：0

代码可运行

一. 创建vue

第一种方式

使用vue-cli

#查看脚手架版本,确保vue/cli的版本在4.5.0以上
vue --version
vue -V
#安装或升级你的@vue/cli
npm install -g @vue.cli
##创建项目
vue create vue_test
## 启动
cd vue_test
npm run serve

第二种方式

使用vite

 npm init vite-app vue3_test_vite

#安装依赖
yarn
# 启动
# 这里后面填，并没有启动成功

官方文档:https://vitejs.cn/guide/why.html#why-not-bundle-with-esbuild

什么是vite
- 新一代前端构建工具
优势如下
- 开发环境中,无需打包操作,可快速的冷启动
- 轻量快速的热重载(HMR)
- 真正的按需编译,不在等待整个应用程序编译完成
传统构建

vite构建

分析工程

main.js

//导入的不是vue的构造函数，是一个名为createApp的工厂函数
import { createApp } from 'vue'
import App from './App.vue'

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

/*
createApp(App).mount('#app')
替换了这句
const vm = new Vue({
    render:h=>h(App)
});
vm.$mount('#app')
*/

这个就是createApp的返回,类似v2的vm,但是比vm更轻量

mount就是挂载组件,只有挂载了App,这个组件才会显示,同时也可以调用unmount去卸载组件

vue3的初始化,已经不兼容Vue2的 new Vue({})的写法了,import的直接是undefined

Vue组件的区别
- 可以没有根标签

开发者工具

目前vue的插件是支持vue2/vue3的,无需新下载版本

常见Composition API

composition api :组合式api

文档地址: https://v3.cn.vuejs.org/guide/composition-api-introduction.html

setup

理解:
1. vue3.0中一个新的配置项,值为一个函数
setup是所有Composition api(组合api) 表演的舞台
组建中所用到的东西,数据,方法等等,均要配置在setup中
setup函数的两种返回值
1. 若返回一个对象,则对象的属性,方法,在模板中均可以直接使用(重点关注)
2. 若返回一个渲染函数,则可以自定义渲染内容(了解)
注意点
1. vue2.x配置(data,methods,computed...)中可以访问到setup中的属性,方法
2. 但是setup中不能访问到vue2.x配置(data,methods,computed)
3. 如果有重名,setup优先
4. 尽量不要与vue2.x配置混用
5. setup不能是一个async函数,因为返回值不再是return的对象,而是promise,模板看不到return对象中的属性

hello

setup的第一种用法

<template>

  <h1>我是setup测试</h1>
  <h1>个人信息</h1>
  <h2>{{name}}</h2>
  <h2>{{age}}</h2>
  <button @click="sayHello">sayHello</button>
</template>

<script>

export default {
  name: 'App',

  //这里会丢失响应式,只是做一个演示
  setup(){
    let name = "花花";
    let age = 18;

    function sayHello() {
      alert(`我的名字是${name},我今年${age}岁`)
    }

    return {
      name,age,sayHello
    }
  }

}
</script>

<style>
#app {
  font-family: Avenir, Helvetica, Arial, sans-serif;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  text-align: center;
  color: #2c3e50;
  margin-top: 60px;
}
</style>

setup的第二种用法

<template>

  <h1>我是setup测试</h1>
  <h1>个人信息</h1>
  <h2>{{ name }}</h2>
  <h2>{{ age }}</h2>
  <button @click="sayHello">sayHello</button>
</template>

<script>

import {h} from "vue";

export default {
  name: 'App',
  setup() {
    return ()=> h("h1","花花")
  }

}
</script>

<style>
#app {
  font-family: Avenir, Helvetica, Arial, sans-serif;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  text-align: center;
  color: #2c3e50;
  margin-top: 60px;
}
</style>

ref

修改sayHelllo

function sayHello() {
  name = "花花2";
  age = 20;
  console.log(name,age)
  // alert(`我的名字是${name},我今年${age}岁`)
}

实际上是修改了,但是因为不是响应式数据,视图不刷新

使用ref解决这个问题

setup(){
    let name = ref("花花");
    let age = ref(18);

    function sayHello() {
        console.log(name,age)
    }

ref包裹的实际上返回了一个RefImpl 引用实现类,官网原话是响应式引用

/*
* 可以通过这个来修改变量
*/
function sayHello() {
  name.value = "花花2";
  age.value = 20;
}

完整代码

<template>

  <h1>我是setup测试</h1>
  <h1>个人信息</h1>
  <h2>{{ name }}</h2>
  <h2>{{ age }}</h2>
  <button @click="sayHello">sayHello</button>
</template>

<script>


import {ref} from "vue";

export default {
  name: 'App',
  setup(){
    let name = ref("花花");
    let age = ref(18);

    function sayHello() {
      name.value = "花花2";
      age.value = 20;
      console.log(name,age)
    }

    return {
      name,age,sayHello
    }
  }

}
</script>

<style>
#app {
  font-family: Avenir, Helvetica, Arial, sans-serif;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  text-align: center;
  color: #2c3e50;
  margin-top: 60px;
}
</style>

ref对对象的处理

let job = ref({
    jobs:"前端开发工程师",
    salary:'3k'
})


function sayHello() {
    console.log(job.value)
}

发现ref对对象的处理时不一样的,他是proxy

总结

作用: 定义一个响应式数据
语法const xxx = ref(initValue)
- 创建一个包含响应式数据的引用对象(refrence对象,简称reg对象)
- js操作数据xxx.value
- 模板中读取数据: 不需要.value,直接<div>{{xxx}}</div>
备注:
- 接收的数据可以是基本类型,也可以是对象
- 基本数据类型: 响应式依然是靠Object.defineProperty()的get和set完成的
- 对象类型: 内部求助了vue3.0中的新函数,reactive
最终代码

<template>

  <h1>我是setup测试</h1>
  <h1>个人信息</h1>
  <h2>{{ name }}</h2>
  <h2>{{ age }}</h2>
  <button @click="sayHello">sayHello</button>
  <h2>职业:{{job.jobs}}</h2>
  <h2>薪水：{{job.salary}}</h2>
</template>

<script>


import {ref} from "vue";

export default {
  name: 'App',
  setup(){
    let name = ref("花花");
    let age = ref(18);
    let job = ref({
      jobs:"前端开发工程师",
      salary:'3k'
    })

    function sayHello() {
      name.value = "花花2";
      age.value = 20;
      job.value.salary = '6k'
      job.value.jobs = "全栈开发工程师"
      console.log(name,age)
      console.log(job.value)
    }

    return {
      name,age,sayHello,job
    }
  }

}
</script>

<style>
#app {
  font-family: Avenir, Helvetica, Arial, sans-serif;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  text-align: center;
  color: #2c3e50;
  margin-top: 60px;
}
</style>

本文参与腾讯云自媒体同步曝光计划，分享自微信公众号。

原始发表：2022-01-26，如有侵权请联系 cloudcommunity@tencent.com 删除

api