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!
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 } } }
//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 );
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); },
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: [...] })
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
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)
//比方说你要访问 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) })
Recommended reading:
vue changes the status of the currently selected itemDetailed explanation of the use of vue better-scroll's scrolling plug-inThe 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!