VUE personal summary (problems encountered)

This article is a summary of the process of using vue and the questions asked by some community friends. Friends who are interested can learn together

Preface

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 In the created life cycle, because the same route is loaded twice or even multiple times, the monitoring is not reached. Exiting the page and entering another article page will not run the created component life cycle. As a result, the article data is still the data 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. Using this in the asynchronous callback function 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 function. (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 routing jump continues to run and does not proceed in time Destruction

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, background calls are still continuing. , the console will continuously report errors. If the amount of calculation is large, it cannot be cleared in time, which will cause serious page freezes.

Solution: Stop setInterval in the component life cycle beforeDestroy

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

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 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 switching routes.

Note: This feature is only available in browsers that support history.pushState.

The routing settings are as follows: (For details, click here: 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 users from making mistakes by clicking the wrong close button, etc., resulting in no saving. Entered information (key information).

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 render elements and components once, optimized Update rendering performance

v-once I believe this command is rarely used by everyone, but I personally feel it is quite practical!

Render elements and components only 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, only in the development environment

This local proxy is used to solve cross-domain problems in the development environment. Cross-domain is a commonplace problem. Yes, proxy. Configuring the proxy in vue is very simple:

//比方说你要访问 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)
  })

8. There are no problems with local development, but 404 is the problem when deploying the server

Due to front-end routing, single-page applications should be placed in web proxy servers such as nginx, apache, tomcat, etc. Never access index.html directly, and change the routing address of react or vue according to the project path of your own server.

Note:

1. vue-router’s history mode

2. ServicenginxConfiguration

The above is what I compiled for everyone. I hope it will be helpful to everyone in the future.

Related articles:

Nuxt.js Vue server-side rendering exploration

What are the differences between let and var defined variables in js?

veloticy-ui realizes text animation effect

The above is the detailed content of VUE personal summary (problems encountered). For more information, please follow other related articles on the PHP Chinese website!