-
今天我在下载脚手架的时候发现，可以下载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中进行引入
image.png -
这是我学习技术胖的vue3.0+ts中的，你们也可以去学习下！