Vue和React不同点

2021-12-27 22:56 cyhcyh 阅读(46) 评论(0) 收藏举报

class

Vue : 使用class

React : 使用ClassName

样式中引入图片

Vue:
background-image: url('~assets/img/sprite_01.png');
React:
background-image: url(${require('@/assets/img/sprite_01.png')});

路由标签

Vue : 
<router-link> <a> XXXX </a></router-link>
React:
<NavLink></NavLink>
React中NavLink带有<a>的属性

Vue中在less中使用需要加上&符号

&:last-of-type

less中使用伪元素也要加上这个符号　　

&:after

:last-of-type: 匹配父元素下最后一个特定类型的元素，这里的类型是指的标签类型，而不是class或者id等其他类型,通过伪类选择器前的其他选择器找到匹配元素，拿到匹配元素的 Tag, 然后判断是否是该父元素下的所有同 Tag 类型元素中的最后一个，如果是，则匹配此伪类选择器。

------tip 如果标签类型一样,可以用classname来匹配,如果标签类型不一样不可以匹配

:last-child 可以使用类名进行匹配

Redux

action会触发所有reducer , 在reducer中根据action.type判断是否是需要触发的action

所有的 reducer 都会收到 action。
reducer 通过 action.type 来进行判定处理。

如果某个 reducer 不处理某个动作，也就是没有处理这个 action.type 的 case，就会走 default 分支，把 state 原样返回。

Vuex

Vue中一直用this.$store.属性非常麻烦 , 将其直接在computed中定义一下即可

computed: {
  ...mapGetters(["menu"]),
  sidebar() {
    return this.$store.state.app.sidebar;
  },
}




Vuex监听键盘按键

@keyup.enter.native


JS中&&和||的另一种意义
例如：
var  a =  obj || " "  ;     //如果 obj 为空，a就赋值为 " " ；
var  a = check() &&  do();    //如果check()返回为真，就执行do()，并将结果赋值给 a;


React
中的<Redict>标签一般用在Router中的<switch>标签里面,在上面路由没有匹配到的时候跳转到指定页面

不在switch中使用的话,加载到<Redict>标签的时候就会直接重定向到指定页面

vue.js取消事件冒泡

<div @click.stop="doSomething($event)">vue取消事件冒泡</div>

vue.js阻止默认事件

<div @click.prevent="doSomething($event)">vue阻止默认事件</div>

Vue中函数

常规函数

常规函数可以用几种不同的方式定义。

第一种方法在 Vue 组件中较不常见，因为写出来要更长一些：

methods: {
  regularFunction: function() {
    // Do some stuff
  }
}

第二种方法是简写方式，我们也经常使用：

methods: {
  shorthandFunction() {
    // Do some stuff
  }
}

在像这样的常规函数中，this将引用函数的“所有者”。因为我们是在Vue组件上定义它的，所以this指的是Vue组件。

在大多数情况下，我们应该在 Vue 中使用常规函数，特别是在创建时

methods
computed props
watched props

虽然常规函数通常是我们所需要的，但是箭头函数也非常方便。

箭头函数

箭头函数可以更短，更快的编写，因此最近获得了广泛的欢迎。但是，它们在对象上定义方法时并没有太大的不同，就像我们在编写Vue组件时所做的那样。

这是他们在Vue组件上的样子：

methods: {
  arrowFunction: () => {
    // Do some stuff
  }
}

在处理 this 问题时，真正的差异开始发挥作用。

箭头函数采用词法作用域，意味着箭头函数从它的上下文中获取this。

如果试图从Vue组件上的箭头函数内部访问 this，将得到一个错误，因为 this 不存在

data() {
  return {
    text: 'This is a message',
  };
},
methods: {
  arrowFunction: () => {
    console.log(this.text);  // ERROR! this is undefined
  }
}

简而言之，尽量避免在Vue组件上使用箭头函数。这将会省去许多头痛和困惑的问题。

有时使用箭头函数是很好的，但这只在不引用this的情况下才有效。

computed: {
  location: () => window.location,
}





Vue全局使用Message组件,并且全局设置消失时间

import { MessageBox,Message } from 'element-ui';

Vue.prototype.$message = function (msg) {
Message(msg)
}
Vue.prototype.$message = function(msg){
return Message({
message:msg,
duration:2000
})

}
Vue.prototype.$message.success = function (msg) {
return Message.success({
message: msg,
duration: 1500
})
}
Vue.prototype.$message.warning = function (msg) {
return Message.warning({
message: msg,
duration: 1000
})
}

在this不是指向Vue的时候,这样子来使用this.$message

Vue.prototype.$message('账号或密码错误')



this._data在Vue中有特殊的意义





Vue时间处理

<el-time-picker

v-model="this.currentLocation.nightShiftStartTime"

format="HH:mm"

value-format="yyyy-MM-dd HH:mm:ss"

placeholder="晚班起始时间"

el-time-picker可以接收JS中的Date类型的数据，设置value-format，传入指定格式的string，format是指在组件中显示的格式

JAVA中的Date类型经过JSON转换不能直接作为JS的Date类型，最好全部使用'yyyy-MM-dd'这种格式传递，后端可以直接用Date接收，前端也可以newDate()或者直接使用




Content type 'application/x-www-form-urlencoded;charset=UTF-8' not supported
要么是后端接收DTO没有实现序列化接口，要么是没有用@RequestBody，要么是前台没有以对象形式传参

watch传入的参数

解决v-if 不显示的问题

要使用这种方式解决获取不到dom的问题

this.chart = echarts.init(this.$refs.lbar);

不可以使用

this.chart = echarts.init(document.getElementById("lbar"));

具体原因待解决

https://segmentfault.com/q/1010000014574665/

https://www.zhihu.com/question/24702250

下面的内容待确认，不一定对

watch中的属性

immediate 为true且监听props时，在mounted之前就执行，

deep 可以监听对象或者数组有没有变化，

Vue 函数 this.$nextTick()将回调延迟到下次 DOM 更新循环之后执行。假设我们更改了某个dom元素内部的文本，而这时候我们想直接打印出这个被改变后的文本是需要dom更新之后才会实现的，也就好比我们将打印输出的代码放在setTimeout(fn, 0)中；

this.$nextTick(() => {

this.initChart();

});

axios发出多个请求

this.$axios.all([me.getAllTask(),me.getAllCity()])
.then(me.$axios.spread(function(allTask, allCity){
console.log('所有请求完成')
console.log('请求1结果',allTask)
console.log('请求2结果',allCity)

}))





props必须写接收的类型

刷新页面返回顶部

cyhcyh