-
今天我在下载脚手架的时候发现,可以下载Vue3.0的脚手架了,注意:里面可以使用vue2.0的语法,也可以使用vue3.0的语法,而vue3.0的语法不需要我们再去下载并引入@vue/composition-api,我们直接使用ref或者是reactive的时候,脚手架会自动的帮助我们引入,这一点很nice
-
首先介绍的是生命周期
- Vue2.0==========》Vue3.0
- beforeCreate=====》setup
- created==========》setup
- beforeMount======》onBeforeMount
- mounted=========》onMounted
- beforeUpdate===== 》onBeforeUpdate
- updated========= 》onUpdated
- beforeDestroy==== 》onBeforeUnmount
- destroy========= 》onUnmounted
-
ref和reactive的区别
- ref:创建一个包装式对象,含有一个响应式属性value(我在百度上看到有的人说,ref只可以监听简单的数据,如数字、字符串、布尔值等,但是我用代码测了一下,他跟reactive的写法可以是一样的,而且他是在新建对象外在创建一个属性可以视图显示的,而reactive内存显示但是视图不更新,有不同意见的,欢迎留言!)
- reactive:创建一个响应式对象,非包装类,相当于data
- 我们在来看他们的写法上有何不同
- ref语法及点击事件
{{title}}
这种在页面上数据不会渲染出来
{{state1.c}}要用这种进行渲染
{{state1.cc}}要用这种进行渲染
{{item.balance_deal}}---ref
{{item.aa}}---ref
import { reactive , toRefs , ref } from 'vue'//这个脚手架会自动生成,没有生成的话,你可以自己加上
export default {
setup(){
let state1=ref({声明变量
b:666,
c:false
});
这是方法的写法
let refXg=()=>{
state1.value.c=!state1.value.c;点击按钮的时候,属性值发生改变==》可以输出
state1.value.cc=123;点击按钮的时候,给这个变量新增一个cc的属性,视图可以渲染出来
console.log(state1);//打印输出,属性都有
}
const timer1=ref({
"code":"000",
"msg":"成功",
"data":[{
"flg":1,
"deal_time":"2020-08-03 09:26:32",
"balance_deal":"+100.00",
"balance_id":1,
},
{ "flg":0,
"deal_time":"2020-07-31 17:24:01",
"balance_deal":"-500.00",
"balance_id":1,
},
{ "flg":1,
"deal_time":"2020-07-31 17:12:10",
"balance_deal":"+1000.00",
"balance_id":1,
}],
"suc":true
});
let xg=()=>{点击按钮的时候,给数据中添加一个aa为false的属性
timer1.value.data.forEach(v=>{
v.aa=false;
})
}
return{
state1,必须要有返回值,而且是直接返回变量
title:state1.value.c,这种在页面上不会渲染,写法错误
refXg,返回方法
timer1,
xg
}
}
}
- reactive语法及点击事件
{{title}}
这种在页面上数据会渲染出来,但是不是响应式的,数据修改好后,页面不会立刻改变视图,需要刷新的时候,才可以显示
{{c}}要用这种进行渲染
{{cc}}这种新增加的属性,没有在视图渲染出来,打印后,内存中显示有数据
{{item.balance_deal}}---reactive
{{item.aa}}---reactive
这里的视图会渲染出来
import { reactive , toRefs , ref } from 'vue'//这个脚手架会自动生成,没有生成的话,你可以自己加上
export default {
setup(){
let state=reactive({声明变量
b:666,
c:false
});
这是方法的写法
let refXg=()=>{
state.c=!state1.c;点击按钮的时候,属性值发生改变==》可以输出
state.cc=123;点击按钮的时候,给这个变量新增一个cc的属性,视图不会渲染出来
console.log(state);//打印输出,属性都有
}
const timer=reactive({
"code":"000",
"msg":"成功",
"data":[{
"flg":1,
"deal_time":"2020-08-03 09:26:32",
"balance_deal":"+100.00",
"balance_id":1,
},
{ "flg":0,
"deal_time":"2020-07-31 17:24:01",
"balance_deal":"-500.00",
"balance_id":1,
},
{ "flg":1,
"deal_time":"2020-07-31 17:12:10",
"balance_deal":"+1000.00",
"balance_id":1,
}],
"suc":true
});
let xg=()=>{点击按钮的时候,给数据中添加一个aa为false的属性
timer1.data.forEach(v=>{
v.aa=false;
})
}
return{必须要有返回值,而且是直接返回变量
...toRefs(state),这种写法是响应式的,并且可以直接输出属性名
title:state.c,在页面上可以进行输出,但是不是响应式的,发生改变后,视图不发生改变
refXg,返回方法
...toRefs( timer),
xg,
...state,这种写法也可以渲染,但是也不是响应式的渲染
}
}
}
- 传值:provide(“a”,值),在子组件中通过const b=inject("a");return{b},他只能是在页面开始就传值了,在点击事件中是不可以进行传值的,控制台显示只能在setup内部进行使用,还有在我们的业务场景中,好像也是不需要的,或者可以用其他的方式进行传参
-
补充:vue3.0中新增的两个钩子函数
import { onRenderTracked, onRenderTriggered } from 'vue'
在setup中写这两个事件
// 这是状态触发,就是你点击或者是那个数据变化,就会打印出来,只有当前触发的,会将新的value值和旧的value都打印
// 相比下面的钩子函数,这个更精准一些
onRenderTriggered((e)=>{
console.log(e);
})
// 状态跟踪钩子函数,只要页面上的数据发生改变就会进行触发
onRenderTracked((event)=>{
console.log(event);
});
-
watch监听ref及reactive声明的变量及监听多个变量
watch监听的使用
- {{overText}}
- {{overText1}}
-
- 你的选择是【{{user}}】
-
模块化,如果我们想要在多个组件中进行一个方法复用的话,我们会怎么选择呢?
- 在vue2.x中我们可能会使用mixin,在vue3.x中,看代码
直接新建一个文件夹userNowTime.js吧,这是我们写的公共的方法
import { ref } from "vue";
const nowTime = ref("00:00:00");
const getNowTime = () => {
const now = new Date();
const hour = now.getHours() < 10 ? "0" + now.getHours() : now.getHours();
const minu =
now.getMinutes() < 10 ? "0" + now.getMinutes() : now.getMinutes();
const sec =
now.getSeconds() < 10 ? "0" + now.getSeconds() : now.getSeconds();
nowTime.value = hour + ":" + minu + ":" + sec;
setTimeout(getNowTime, 1000);
};
export { nowTime, getNowTime }
在about.vue中引入
import {nowTime, getNowTime} from '../assets/userNowTime';
要注意:我们一定要在setup中将我们的方法及变量在return出去,否则会不显示
setup(){
return{
nowTime,getNowTime
}
}
在页面中直接写就可以了
{{nowTime}}
-
封装的函数
import { ref } from 'vue';
import axios from 'axios';
function userUrlAxios(url: string){
const result=ref(null);//存储数据
const loading=ref(true);//显示loading
const loaded=ref(false);//是否显示图片
const error=ref(null);//报错提示
axios.get(url).then(res=>{
loading.value=false;
loaded.value=true;
result.value=res.data;
}).catch(e=>{
error.value=e;
loading.value=false;
})
return{
result,
loaded,
loading,
error
}
}
export default userUrlAxios;
在使用的页面中进行调用
我是test页面
{{title}}
{{msg}}
Loading.....
-
在脚手架中进行全局注册组件,怎么注册呢?
-
首先跟我们的vue2.0一样,在components文件下新建一个.vue文件,在main.js中进行引入
-
这是我学习技术胖的vue3.0+ts中的,你们也可以去学习下!