Open zhaobinglong opened 3 years ago
<template>
<h1>Bank Account Balance</h1>
<p>{{ accountInUSD }}</p>
</template>
<script>
export default {
props: {
accountBalance: {
type: Number,
required: true
}
},
computed: {
accountInUSD() {
return '$' + this.accountBalance
}
}
}
</script>
新建utils.js文件,添加函数
/**
* 格式化UTC时间,输出YYYY-MM-DD
*
* @export
* @param {*} str
*/
export function filterUTCTimeFormat (str) {
const dateStr = new Date(str).toLocaleDateString().replace(/\//g, '-')
let dateArr = dateStr.split('-')
dateArr = dateArr.map(item => {
return item.length <= 1 ? '0' + item : item
})
return dateArr.join('-')
}
在vue单文件组件中导入utils执行, 注意必须在methods中申明才可以使用
<div class="value">
{{ filterUTCTimeFormat(item.visitTime) }}
</div>
import { filterUTCTimeFormat } from '@/libs/utils'
methods: {
filterUTCTimeFormat,
}
// setup接受两个参数,第一个参数是props, 另一个参数是context,
// 大家在使用2.0时习惯的在this下获取属性的方式 ,在 vue3.0 中需要改变成ctx
setup(props, ctx) {
console.log(props, ctx)
}
在Vue3中,我们可以把数据经过 reactive 加工变成响应式的对象,用于模版的渲染数据, 当然Vue的向下兼容 还是允许我们使用data的方式实现
const { reactive, toRefs } = Vue
let App = {
template: `
<div class="container">
count: {{count}}
<button @click="handlerCountAdd"> Click ++ </button>
</div>`,
setup() {
const state = reactive({ count: 0 })
const handlerCountAdd = () => {
state.count++
}
return { ...toRefs(state), handlerCountAdd }
}
}
Vue.createApp().mount(App, '#app')
Vue2对比Vue3
vue3.0 的发布与 vue2.0 相比,优势主要体现在:更快、更小、更易维护、更易于原生、让开发者更轻松
初始化数据的方式不一样
生命周期不一样
vue2中的beforeCreate和create周期取消,成为了setUp周期,Vue3中的生命周期,需要import进来才可以使用,不引入的话就不能喝使用。这也是为什么vue3压缩可以更低的原因
数据劫持变更
放弃 Object.defineProperty ,使用更快的原生 Proxy;Proxy是ES6的语法
使用createApp创建实例
ref
计算属性computed
单文件组件多个根结点
支持 Fragments (允许组件有从多个根结点)