Points where VUE is prone to errors

This time I will bring you the points that are easy to make mistakes in VUE. What are the precautions that are easy to make mistakes when using VUE. The following is a practical case, let's take a look.

vue is now a dark horse, github The number of stars has ranked first! Vue has been used more and more in front-end development, and its advantages will not be introduced here. This article is a summary of the process of using Vue and the questions asked by some community friends to help everyone avoid pitfalls. If you like it, you can like it or follow it. I hope this article can help everyone!

1. The routing change page data is not refreshed

This situation occurs because the params parameters of the dependent route are obtained and written in createdlifecycle. Because the same route is loaded twice or even multiple times, monitoring is not reached. Exiting the page and entering another article page does not The created component life cycle will run, causing the article data to be entered for the first time.

Solution: watch to monitor whether the route changes.

watch: {
// 方法1
'$route'
 (to, 
from
) { 
//监听路由是否变化
if
(
this
.$route.
params
.articleId){
// 判断条件1 判断传递值的变化
//获取文章数据
  }
  }
//方法2
'$route'
(to, 
from
) {
if
 (to.path == 
"/page"
) { 
/// 判断条件2 监听路由名 监听你从什么路由跳转过来的
this
.message = 
this
.$route.query.msg  
  }
  }  
 }

2. AsynchronousCallback functionUsing this cannot point to the vue instance object

//setTimeout/setInterval ajax Promise等等
 data(){
return
{
  ...
  }
 },
 methods (){
   setTimeout(
function
 () { 
//其它几种情况相同
   console.log(
this
);
//此时this指向并不是vue实例 导致操作的一些ma'f
  },
1000
);
 }

Solution: Variable assignment and arrow functions. (Reference: The difference between var and let: http://www.jb51.net/article/134704.htm)

//使用变量访问this实例
let
self
=
this
; 
  setTimeout(
function
 () { 
   console.log(
self
);
//使用self变量访问this实例
  },
1000
);
//箭头函数访问this实例 因为箭头函数本身没有绑定this
  setTimeout(() => { 
  console.log(
this
);
  }, 
500
);

3.setInterval route jump continues to run and is not destroyed in time

For example, some barrages and revolving text need to be called regularly. After the route jumps, because the component has been destroyed, but setInterval has not been destroyed, and the background call is still continuing, the console will continue to report errors. If the calculation amount is large, Failure to clear it in time will lead to serious page freezes.

Solution: Stop setInterval

 //组件销毁前执行的钩子函数，跟其他生命周期钩子函数的用法相同。
 beforeDestroy(){
//我通常是把setInterval()定时器赋值给this实例，然后就可以像下面这么停止。
  clearInterval(
this
.intervalId);
 },

in the component life cycle beforeDestroy 4.vue scrolling behavior usage. To enter the route, you need to scroll to the bottom of the browser, the head, etc.

Using front-end routing, when switching to a new route, you want the page to scroll to the top, or to maintain the original scroll position, just like reloading the page. vue-router can do it, but better. It allows you to customize how the page scrolls when routing is switched. Note: This feature is only available in browsers that support history.pushState.

The routing settings are as follows: (For details, click: https://router.vuejs.org/zh-cn/advanced/scroll-behavior.html)

const
 router = 
new
VueRouter
({
  mode: 
'history'
,
  scrollBehavior (to, 
from
, savedPosition) {
if
 (savedPosition) { 
//如果savedPosition存在，滚动条会自动跳到记录的值的地方
return
 savedPosition
   } 
else
 {
return
 { x: 
0
, y: 
0
 }
//savedPosition也是一个记录x轴和y轴位置的对象
   }
   }，
  routes: [...]
  })

5. Implement vue routing to intercept the browser's needs and perform a series of operations, such as saving drafts, etc. Scenario: In order to prevent the user from accidentally clicking the close button, etc., resulting in the entered information (key information) not being saved.

Usage:

//在路由组件中：
 ...
 beforeRouteLeave (to, 
from
, 
next
) {
if
(用户已经输入信息){
//出现弹窗提醒保存草稿，或者自动后台为其保存
  }
else
{
next
(
true
);
//用户离开
  }
 }

There are also life cycle functions such as beforeEach and beforeRouteUpdate. Click here for details: https://router.vuejs.org/zh-cn/advanced/navigation-guards.html

6.v-once only renders elements and components once, optimizing and updating rendering performance I believe that the v-once command is rarely used by everyone, but I personally think it is quite practical!

Elements and components are only rendered once. On subsequent re-renders, the element/component and all of its children will be treated as static content and skipped. This can be used to optimize update performance.

I won’t give an example here, just click here: v-once（https://cn.vuejs.org/v2/api/#v-once）

7. Vue local proxy configuration solves cross-domain problems, limited to development environment This local proxy is used to solve cross-domain problems in the development environment. Cross-domain problems are a commonplace issue. Proxy is very simple to configure the proxy in vue:

//比方说你要访问 http://192.168.1.xxx:8888/backEnd/paper这个接口
//配置 config.js下面proxyTable对象
 proxyTable: {
'/backEnd'
:{
     target:
'http://192.168.3.200:8888'
, 
//目标接口域名有端口可以把端口也写上
//或者prot本地起服务端口与服务端统一
     changeOrigin:
true
, 
    }
 },
// 发送request请求
  axios.
get
(
'/backEnd/page'
) 
//按代理配置 匹配到/backEnd就代理到目标target地址
  .
then
((res) => {
   console.log(res) 
// 数据完全拿得到 配置成功
this
.newsList = res.data
  }, (err) => {
   console.log(err)
  })

I believe you have mastered the method after reading the case in this article. For more exciting information, please pay attention to other related articles on the PHP Chinese website!

Recommended reading:

The above is the detailed content of Points where VUE is prone to errors. For more information, please follow other related articles on the PHP Chinese website!